📂 WEB/CSS

[CSS] input[type="file"] 커스텀 하기

[CSS] input[type="file"] 커스텀 하기input은 브라우저에서 기본적으로 제공 해주는 디자인이 있다.input의 checkbox, radio, file 타입은 디자인을 변경하는데 손이 많이 간다.그 중 file 타입 디자인을 변경해 보자. 기존디자인 스타일 적용 🎈 HTML 파일선택 선택된 파일이 없습니다.🎈 CSSinput[type='file'] { display: block; width: 0; height: 0; overflow: hidden;}.form__input--file_wrap { display: flex;}.form__label--file { width: 80px; height: 30px; line-height:30px; background: #..

2024. 2. 8. 11:25

📂 WEB/CSS

[CSS] input[type="checkbox"], [type="radio"] 디자인하기

input[type="checkbox"], [type="radio"] 디자인하기🎈 체크박스 CSS 변경하기는 기본 디자인을 가지고 있다. 하지만 디자인시안에 따라 체크박스 디자인도 변경해야 할 때가 있어서 정리해본다 기본 디자인 디자인 적용🎈 HTML 태그 안에 과 ,  를 추가한다. 의 기존 디자인은 CSS로 안보이게 해주고 요소가 체크박스 디자인이 될 것이다. 은 체크박스 옆에 텍스트가 들어갈 요소이다. 체크 🎈 기존 check 박스 디자인 초기화input[type="checkbox"]를 안보이게 스타일을 적용해준다🎈 checkbox 디자인하기스타일을 적용하면 html과 css로 원하는 input 디자인을 만들 수 있다 See the Pen 체크박스 디자인 by 방미나 (@uyjlj..

2024. 1. 3. 17:00