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: 14px; /* 체크 표시 크기 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 가운데 정렬 */line-height: 1; /* 체크 모양이 정렬될 때 필요한 값 */}
    /* 선택된 라디오 버튼의 스타일 */
    input[type="radio"]:checked {background-color: var(--color); border: 1px solid var(--color);}

     

    '퍼블리싱' 카테고리의 다른 글

      (0) 2025.01.10
    아코디언 메뉴  (0) 2024.10.10
    input checkbox 체크박스 커스텀  (0) 2024.10.08
    input date 아이콘 커스텀  (0) 2024.10.08
    카운트업 쓰기  (0) 2024.03.25