안녕하세요 오늘은 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;
}
결과물
너비와 높이는 필요에 맞게 조절하시면 됩니다.
'HTML／CSS' 카테고리의 다른 글
| [ HTML / CSS ] 마우스 커서 커스텀하기 (0) | 2022.11.17 |
|---|---|
| [HTML/CSS] 버튼 애니메이션 만들어보기 (0) | 2022.11.09 |
| [ HTML / CSS ] ::after, ::before 사용해보기 (0) | 2022.11.02 |
| [HTML/CSS] FAQ 페이지 만들어보기 (0) | 2022.10.25 |
| [JavaScript] 현재시각 표시하기 (0) | 2022.10.18 |
