inputs
Message Input Box
라이브 미리보기새 탭에서 열기 ↗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>message-input-box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="messageBox">
<div class="fileUploadWrapper">
<label for="file">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 337 337">
<circle
stroke-width="20"
stroke="#6c6c6c"
fill="none"
r="158.5"
cy="168.5"
cx="168.5"
></circle>
<path
stroke-linecap="round"
stroke-width="25"
stroke="#6c6c6c"
d="M167.759 79V259"
></path>
<path
stroke-linecap="round"
stroke-width="25"
stroke="#6c6c6c"
d="M79 167.138H259"
></path>
</svg>
<span class="tooltip">Add an image</span>
</label>
<input type="file" id="file" name="file" />
</div>
<input required="" placeholder="Message..." type="text" id="messageInput" />
<button id="sendButton">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 664 663">
<path
fill="none"
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"
></path>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="33.67"
stroke="#6c6c6c"
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"
></path>
</svg>
</button>
</div>
</body>
</html>