<input type="text" name="" class="" placeholder=" "> <input type="text" name="" class="" placeholder=" "> .info_contents_5 .info_con_padding input{ width: 100%; height: 1.46rem; margin-bottom: 0.4rem; border-radius: 5px; border: 1px solid #d8d8d8; font-size: 0.64rem; padding-left: 0.2rem; outline: none; } .info_contents_5 .info_con_padding .inputs::-webkit-input-placeholder{/*Webkit browsers*/ color:#000; } <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script> $('input').focus(function(){ $(this).css('border','1px solid #0678d1') $(this).addClass('inputs') }) $('input').blur(function(){ $(this).css('border','1px solid #d8d8d8') $(this).removeClass('inputs') }) </script>
CSS
[CSS] input text focus border color, 포커스 시 테두리 색상 변경
chsr 2022. 4. 27. 09:51
■ CSS input text focus border color, 포커스 시 테두리 색상 변경
■ 예제
<input="text"> 요소 포커스 시 테두리 색상으로 변경하는 방법 (그림자 효과)
■ 결과
DEV/CSS
input, textarea, button 파란색 테두리 제거 및 색상 바꾸기
modric 2017. 8. 29. 11:35
input{ outline-style:none; } outline-style = auto | none | dotted | dashed | solid | double | groove | ridge | inset | outset
default |
|
none |
|
| dotted | |
| dashed | |
| solid | |
| double | |
| groove | |
| ridge | |
| unset | |
| outset |
input:focus{ outline: 1px solid blue; } outline-style : 외곽선 스타일 outline-color : 외곽선 색상 outline-offset : 외곽선과 요소의 가장자리 또는 border 사이에 공백 outline-width : 외곽선 폭 outline : 모든 외곽선의 속성 설정
Study/css
input box 테두리 변경방법
더 멋진 세상을 꿈꾸는 개발자 2020. 5. 4. 10:57
input 박스를 클릭 했을떄 나오는 테두리 색상 변경하기
input:focus {outline:2px solid #d50000;}
input 박스를 클릭 했을떄 나오는 테두리 색상 없애기
input:focus {outline:none;}
저작자표시