input select 커스텀 .select_wrap{position: relative;}.select_wrap select{height:56px; border:none; border-bottom: 1px solid #E5E5EC; padding: 0 20px; color: #505050; background: #fff; width: 100%; appearance: none; -webkit-appearance: none;-moz-appearance: none; position: relative; }.select_wrap::after { content:''; position: absolute;top: 50%;right: 20px;transform: translateY(-50%);pointer-events: none; backgrou.. input radio 라디오 커스텀 input[type="radio"] {-webkit-appearance: none; /* 브라우저 기본 스타일 제거 */-moz-appearance: none;appearance: none;width: 18px;height: 18px;border: 1px solid #d0d0d0;border-radius: 4px; /* 모서리를 살짝 둥글게 */display: inline-block;vertical-align: middle;margin-right: 5px;position: relative; background: #eee;}input[type="radio"]:checked::after {content: '✓'; /* 체크 표시 */color: white; /* 체크 표시 색상 */font-size: 14p.. input checkbox 체크박스 커스텀 input[type="checkbox"]{appearance: none;width: 20px;height: 20px;border: 1px solid #ddd;border-radius: 3px;outline: none;cursor: pointer;position: relative;margin-right: 10px;}input[type="checkbox"]:checked {background-color: var(--color);border-color: var(--color);}input[type="checkbox"]:checked::after {content: '✓';color: white;font-size: 14px;position: absolute;top: 50%;left: 50%;transform: t.. input date 아이콘 커스텀 input[type="date"]::-webkit-calendar-picker-indicator,input[type="date"]::-webkit-inner-spin-button { display: none; appearance: none;}input[type='date'] { position: relative; width: 100%; background: url('../img/day.png') no-repeat right 10px center; width: 24px; height: auto; background-color: #fff;} input[type='date']::-webkit-calendar-picker-indicator {position: absolute;left: 0.. input time 아이콘 커스텀 input[type="time"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-inner-spin-button { display: none; appearance: none; } input[type='time'] { position: relative; width: 100%; background: url('../img/time.png') no-repeat right 10px center; width: 24px; height: auto; background-color: #fff; } input css 초기화 input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus{border: none !important; box-shadow: none;} ios input 스타일 초기화 input { -webkit-appearance: none; -webkit-border-radius: 0; } input radio 버튼 꾸미기 html input id = label for 값이 동일해야한다. 강아지 고양이 얼룩말 호랑이 css .in_box{ display: flex; justify-content: space-between; } .in_box input[type=radio]{ display: none; } .in_box input[type=radio] + label { color: #222222; font-size: 1.6rem; width: 24%; border: 1px solid #888; height: 45px; line-height: 45px; text-align: center; } .in_box input[type=radio]:checked + label { color: #fff; background: #000; } 이전 1 다음