[CSS] div내 input 포커스 시, div 테두리 focus주기

/* 초기에는 div의 border를 숨김 */ .a { border: 2px solid transparent; transition: border 0.3s; } /* input 요소나 input의 포커스 가능한 자식 요소가 focus를 받았을 때, div의 border 스타일을 변경 */ .a:focus-within { border-color: blue; } 만약 그림자를 주고 싶다면 아래 블로그 참고 https://zxchsr.tistory.com/301 [CSS] input text focus border color, 포커스 시 테두리 색상 변경 ■ CSS input text focus border color, 포커스 시 테두리 색상 변경 ■ 예제 요소 포커스 시 테두리 색상으로 변경하는 방법 (그림..

• format_list_bulleted HTML & CSS
• · 2023. 11. 7.
• textsms

[CSS] 자동 완성 시, CSS 바뀌는 현상

텍스트 자동완성 시, CSS 스타일이 변경된다. 그때 아래와 같이 CSS를 지정하거나 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow: 0 0 0px 1000px #132234 inset !important; -webkit-text-fill-color: #fff !important; } 혹은 html에서 자동완성 기능이 제공되지 않..

• format_list_bulleted HTML & CSS
• · 2023. 10. 23.
• textsms

[CSS] label, background-image없이 체크박스 CSS 적용하기

input checkbox에 바로 CSS를 먹이면 적용이 안된다. 그래서 찾아보니 죄다 Label 코드를 input과 연결해서 작업하는 방식이었다. input[type="checkbox"]+label{ display: inline-block; background-image : url('이미지주소'); width: 20px; height: 20px; cursor: pointer; vertical-align: middle; margin : 2px } input[type="checkbox"]:checked + label{ background-image : url('이미지주소'); width: 20px; height: 20px; vertical-align: middle; } 문제는 이미 구현해놓은 코드가 많아서..

• format_list_bulleted HTML & CSS
• · 2023. 10. 23.
• textsms

[CSS] Input type="text" 안에 아이콘 넣기

다른 블로거 분들을 보면 로 감쌌던데, 그렇게 했더니 자꾸 블록이 아래로 내려갔다. .test { width: 40px; height: 28px; background: #132234; background-image : url('경로'); background-repeat: no-repeat; background-position: left; background-position-x: 8px; color: #fff; border-width: 0px; font-family: Noto Sans KR; position: absolute; margin-left: 8px; padding-left: 30px; padding-right: 5px; } 처음 적용하면 자꾸 중간정렬도안되고 완전 왼쪽에 딱붙어나오게 되는데 pad..

• format_list_bulleted HTML & CSS
• · 2023. 10. 23.
• textsms