SELECT 박스에서 테두리 변경하기

SELECT 박스에서 테두리 변경하기

기본적으로 select 박스는 css가 적용이 되지 않는다. 따라서 레이어를 생성하고 콤보박스의 테두리를 강제로 가리고, 대신 레이어에 테두리를 넣어 보기에는 콤보박스의 테두리가 바뀐것처럼 보이게 한다.

#select {

    font-size:13px;

    width:  200px;

    background:#eee;

    font-weight:bold;

}

#div1 {

    position:relative;

    margin-right:7px;

    width:204px;

    height:25px;

    border:2px solid #000;

    background-color:#eee;

   

}

#div2 {

    width:204px;

    position:absolute;

    top:0px;

    z-index:1;

    clip:rect(3,200,18,3);    // 클립은 이미지를 자르는 효과, ( 상, 우, 하, 좌 ) 순서

}

 

<div id="div1">                      // 유동레이어 생성

    <div id="div2">                  // 고정레이어 생성. 유동레이어의 위에 고정레이어를 겹친다.

        <select id="select">      // 고정레이어에 콤보박스 넣는다. Clip 으로 조절되어 적당하게 보인다.

                  <option value="1">NO.1</option>

                  <option value="2">NO.2</option>

                  <option value="3">NO.3</option>

        </select>

    </div>

</div>