HTML／CSS

[HTML / CSS] textarea 커스텀하기

teamnova 2022. 11. 6. 12:00
728x90

안녕하세요 오늘은 textarea를 커스텀 해보겠습니다.

 

기본 textarea는 이런 형태인데요

 

여기서 크기 조절 기능과 테두리 선을 없애고, 밑 선만 있는 형태로 바꿔보겠습니다.

 

html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="textarea.css">

</head>

<body>
  <textarea id="custom_textarea"></textarea>
</body>

</html>

textarea.css

#custom_textarea {
  width: 300px;
  height: 30px;
  font-size: 18px;
  background-color: #8b8b8b1c;
  resize: none;
  color: black;
  border: none;
  border-bottom: 2px solid #0000007e;
  outline: none;
}

 

결과물

너비와 높이는 필요에 맞게 조절하시면 됩니다.