반응형
html css 모서리 둥글게 입력창 만들기
border-radius 속성을 사용하면 입력 필드의 모서리를 둥글게 만들 수 있습니다
codepen에서 보기
html, css 코드 한눈에 보기
<html>
<head>
<style>
.rounded-input {
width: 300px; /* 입력창 너비 */
height: 40px; /* 입력창 높이 */
padding: 10px; /* 안쪽 여백 */
font-size: 16px; /* 글자 크기 */
border: 1px solid #ccc; /* 테두리 색상 */
border-radius: 15px; /* 모서리 둥글기 */
outline: none; /* 선택 시 외곽선 제거 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 입력창 그림자 */
}
.rounded-input:focus {
border-color: #007BFF; /* 선택 시 테두리 색상 변경 */
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2); /* 선택 시 그림자 강조 */
}
</style>
</head>
<body>
<input type="text" class="rounded-input" placeholder="Enter text here">
</body>
</html>
반응형
'html, css, javascript' 카테고리의 다른 글
| css 버튼 클릭하면 반대로 회전 transform.rotate (0) | 2024.11.25 |
|---|---|
| 클릭시 버튼 크기 작아지기 css, html (0) | 2024.11.24 |
| 사이드바 하위 메뉴 클릭하면 나오고 클릭하면 사라지는 기능 (0) | 2024.03.13 |
| html, css로 터미널 처럼 표현하기 (0) | 2024.02.25 |
| 쿠팡 파트너스 배너 오른쪽 정렬 (4) | 2024.01.15 |
댓글