1 
 2<div class="messageBox">
 3  <div class="fileUploadWrapper">
 4    <label for="file">
 5      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 337 337">
 6        <circle
 7          stroke-width="20"
 8          stroke="#6c6c6c"
 9          fill="none"
10          r="158.5"
11          cy="168.5"
12          cx="168.5"
13        ></circle>
14        <path
15          stroke-linecap="round"
16          stroke-width="25"
17          stroke="#6c6c6c"
18          d="M167.759 79V259"
19        ></path>
20        <path
21          stroke-linecap="round"
22          stroke-width="25"
23          stroke="#6c6c6c"
24          d="M79 167.138H259"
25        ></path>
26      </svg>
27      <span class="tooltip">Add an image</span>
28    </label>
29    <input type="file" id="file" name="file" />
30  </div>
31  <input required="" placeholder="Message..." type="text" id="messageInput" />
32  <button id="sendButton">
33    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 664 663">
34      <path
35        fill="none"
36        d="M646.293 331.888L17.7538 17.6187L155.245 331.888M646.293 331.888L17.753 646.157L155.245 331.888M646.293 331.888L318.735 330.228L155.245 331.888"
37      ></path>
38      <path
39        stroke-linejoin="round"
40        stroke-linecap="round"
41        stroke-width="33.67"
42        stroke="#6c6c6c"
43        d="M646.293 331.888L17.7538 17.6187L155.245 331.888M646.293 331.888L17.753 646.157L155.245 331.888M646.293 331.888L318.735 330.228L155.245 331.888"
44      ></path>
45    </svg>
46  </button>
47</div>          

  1 
  2.messageBox {
  3  width: fit-content;
  4  height: 40px;
  5  display: flex;
  6  align-items: center;
  7  justify-content: center;
  8  background-color: #2d2d2d;
  9  padding: 0 15px;
 10  border-radius: 10px;
 11  border: 1px solid rgb(63, 63, 63);
 12}
 13.messageBox:focus-within {
 14  border: 1px solid rgb(110, 110, 110);
 15}
 16.fileUploadWrapper {
 17  width: fit-content;
 18  height: 100%;
 19  display: flex;
 20  align-items: center;
 21  justify-content: center;
 22  font-family: Arial, Helvetica, sans-serif;
 23}
 24 
 25#file {
 26  display: none;
 27}
 28.fileUploadWrapper label {
 29  cursor: pointer;
 30  width: fit-content;
 31  height: fit-content;
 32  display: flex;
 33  align-items: center;
 34  justify-content: center;
 35  position: relative;
 36}
 37.fileUploadWrapper label svg {
 38  height: 18px;
 39}
 40.fileUploadWrapper label svg path {
 41  transition: all 0.3s;
 42}
 43.fileUploadWrapper label svg circle {
 44  transition: all 0.3s;
 45}
 46.fileUploadWrapper label:hover svg path {
 47  stroke: #fff;
 48}
 49.fileUploadWrapper label:hover svg circle {
 50  stroke: #fff;
 51  fill: #3c3c3c;
 52}
 53.fileUploadWrapper label:hover .tooltip {
 54  display: block;
 55  opacity: 1;
 56}
 57.tooltip {
 58  position: absolute;
 59  top: -40px;
 60  display: none;
 61  opacity: 0;
 62  color: white;
 63  font-size: 10px;
 64  text-wrap: nowrap;
 65  background-color: #000;
 66  padding: 6px 10px;
 67  border: 1px solid #3c3c3c;
 68  border-radius: 5px;
 69  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.596);
 70  transition: all 0.3s;
 71}
 72#messageInput {
 73  width: 200px;
 74  height: 100%;
 75  background-color: transparent;
 76  outline: none;
 77  border: none;
 78  padding-left: 10px;
 79  color: white;
 80}
 81#messageInput:focus ~ #sendButton svg path,
 82#messageInput:valid ~ #sendButton svg path {
 83  fill: #3c3c3c;
 84  stroke: white;
 85}
 86 
 87#sendButton {
 88  width: fit-content;
 89  height: 100%;
 90  background-color: transparent;
 91  outline: none;
 92  border: none;
 93  display: flex;
 94  align-items: center;
 95  justify-content: center;
 96  cursor: pointer;
 97  transition: all 0.3s;
 98}
 99#sendButton svg {
100  height: 18px;
101  transition: all 0.3s;
102}
103#sendButton svg path {
104  transition: all 0.3s;
105}
106#sendButton:hover svg path {
107  fill: #3c3c3c;
108  stroke: white;
109}