custom select trigger css로 해결

기본 select style을 못견디는 디자이너를 위해 평소에는 ul과 li로 select의 멋을 지켜왔지만

등록 폼과 같은 엄청난 select의 향연인 페이지에선 부득이하게 기본 select와 option을 사용해야 할 때가 있다.

이럴 경우 select에서라도 최선을 다했음을 어필하기 위해

 

<div class="selectInputDiv">
  <select name="" id="" class="selectInput">
    <option value="">성별</option>
    <option value="">남</option>
    <option value="">여</option>
  </select>
</div>

.selectInputDiv:after{
	content:'';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 2px solid #CECECE;
	border-bottom: 2px solid #CECECE;
	transform: rotate(45deg);
	position: absolute;
	top: 13px;
	right: 17px;
}

 

:after가 안먹히는 select의 특성을 고려해 바깥에 div로 한번 감싸 :after로 디자인된 select 화살표를 만들어주는 방식으로 작업하는데 이렇게 만들어진 화살표를 누르면 select가 안열리는 ㅃ치는 상황이 발생한다.

 

생각에는 selectInputDiv click하면 select에 trigger를 걸면 될 것 같았지만

$(function(){
	$('.selectInputDiv').find('select').trigger('change')
    //or
    //$('.selectInputDiv').find('select').trigger('click')
})

 

늘 그렇듯이 한번에 해결되지 않는 ^^..

열심히 삽질하다가 만들어낸 야매 아닌 야매코드를 공유한다.(부끄)

 

 최종 css 

.selectInputDiv{
	//background 색깔은 여기에
        background-color: #fff;
}
.selectInputDiv:after{
	//select 화살표 custom
	content:'';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 2px solid #CECECE;
	border-bottom: 2px solid #CECECE;
	transform: rotate(45deg);
	position: absolute;
	top: 13px;
	right: 17px;
}
.selectInput{
	//select custom은 여기에
	border: 1px solid #D7DCE5;
	border-radius: 5px;
	height: 46px;
	width: 100%;
	padding: 0 10px;
    
        //이게 중요!
        background-color: transparent;
	position: relative;
	z-index: 1;
}

 

왜 select custom을 div에 안하고 select에 바로 하냐면 일반적으로 select 스타일은 input과 같이 가기 때문에!

이렇게 하면 jquery로 trigger고 머고 안해도 select가 눌리게 된다 ^^^...

오늘도 야매 코드만 늘어가는 이 기분...은 어쩔 수 없지 퇴근해야 하니까 ^^^^!