>> 기본적인 input CSS 만들기
.input--text {
height: 34px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
outline: none;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
font-size: 16px;
}
.input--text:focus {
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075),
0 0 5px rgba(81, 167, 232, 0.5);
}
>>> 결과
- focus 없을 때
- focus 있을 때
출처
- fastcampus,
- HeropCode github.com/HeropCode/GitHub-Responsive
'> HTML-CSS' 카테고리의 다른 글
Float 기본 내용 정리 (0) | 2021.03.07 |
---|---|
[HTML/CSS] 기본 버튼(button) CSS 만들기 (0) | 2020.12.31 |
[HTML/CSS] 작명 규칙 (BEM) (0) | 2020.12.31 |
[HTML/CSS] position의 속성 5가지 (static, relative, absolute, fixed, sticky) (0) | 2020.12.29 |
[HTML/CSS] class, id 각각 언제 쓰는 것이 좋을까? (0) | 2020.11.05 |
댓글