[DAY - 23] select 꾸미기, checkbox, radio박스 꾸미기

• select 꾸미기
• checkbox 박스 꾸미기
• radio 박스 꾸미기

 

1) select 꾸미기

select

<div class="box1">
    <select name="" id="">
        <option>네이버</option>
        <option>다음</option>
        <option>구글</option>
        <option>아마존</option>
    </select>
    <button>
        <i class="xi-tag"></i>
    </button>
</div>

        .box2 {
            background-repeat: no-repeat;
            background-position: 210px 50%;
            background-image: url(images/select-bg.gif);
        }
        .box1, .box3 {
            width: 250px;
            height: 50px;
            margin: 30px;
            position: relative;
        }
        .box1 button {
            position: absolute;
            width: 30px;
            height: 30px;
            background-repeat: 50%;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .box1 button i {
            font-size: 18px;
            line-height: 25px;
        }
        .box3::after {
            content: "\ea36";
            font-family: xeicon!important;
            display: inline-block;
            speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            border: 1px solid black;
            padding: 5px;
            border-radius: 20%;
            position: absolute;
            right: 10px;
            top: 10px;
            cursor: pointer;
        }
    </style>

select의 기본 박스를 변경할 수 있다.

첫 번째 box1은 button안에 xi아이콘을 class로 넣었고, box2는 background-image를 이용해 이미지를 불러왔으며 box3는 ::after를 이용해 content에 직접 불러왔다.

 

2) checkbox 박스 꾸미기

checkbox

       .box input[type=checkbox] {
            position: absolute;
            left: -9999px;
            top: 0;
        }
        .box label {
            margin-right: 50px;
            position: relative;
        }
        .box label::before {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            margin-right: 5px;
            vertical-align: middle;
            cursor: pointer;
            transition: 0.5s;
        }
        .box input[type=checkbox]:checked + label::before {
            content: "\270B";
            display: inline-block;
            width: 20px;
            height: 20px;
            border-color: orange;
            color: lightcoral;
            text-align: center;
            line-height: 20px;
        }
    </style>

기존의 checkbox는 absolute를 이용해 보이지 않게 하고 ::before를 사용해 border를 만들고 박스를 checked 했을 때 \270B content를 띄움과 동시에 border의 색도 변하도록 만들어 보았다.

 

3) radio 박스 꾸미기

radio

        .box input[type=radio] {
            position: absolute;
            left: -9999px;
            top: 0;
        }
        .box label {
            display: inline-block;
            margin-left: 50px;
            position: relative;
            height: 30px;
            line-height: 30px;
            padding-left: 40px;
        }
        .box label::after{
            content: "";
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #000;
            position: absolute;
            left: 0;
            top: 0;
            cursor: pointer;
        }
        .box input[type=radio]:checked+label::after{
            content: "";
            display: block;
            width: 30px;
            height: 30px;
            background-image: url(images/ico-formselect-arrow.png);
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: 60%;
        }

checkbox와 비슷한 방법으로 기존의 radio는 눈에 보이지 않게 하고 background-image를 불러와 checked 되면 내가 지정한 이미지가 기존의 radio박스 위치에 나타나도록 했다.