1. Home
  2. Docs
  3. CSS Snippet
  4. sitemap select 박스 브라우저 모두 통일시기기

sitemap select 박스 브라우저 모두 통일시기기

select 태그로 사이트맵 적용 시 브라우저별로 스타일이 다르게 적용이 되는데, 스타일을 모두 하나로 통일시기는 방법

/* for 푸터 하단 사이트 연결 옵션 버튼 */
.selectdiv {
    position: relative;
    float: left;
    /*    min-width: 200px;
	margin: 50px 33%;  */
}
.selectdiv:after {
    content: '<>';
    font: 15px "Consolas", monospace;
    color: #ccc;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 10px;
    top: 13px;
    padding: 0 0 2px; /* border-bottom: 1px solid #999; */
    /* if need - left line */
    position: absolute;
    pointer-events: none;
}
/*To remove button from IE11, thank you Matt */
select::-ms-expand {
    display: none;
}
/* for firefox - button remove */
@-moz-document url-prefix() {
    select {
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: "";
    }
}
.selectdiv select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    max-width: 320px;
    height: 35px;
    float: right;
    margin: 5px 0;
    padding: 0 24px;
    font-size: 12px;
    color: #555;
    background-color: #ffffff;
    background-image: none;
    /*    border: 1px solid #cccccc;   */
    -ms-word-break: normal;
    word-break: normal;
}
select:focus,
textarea:focus {
    color: #555 !important;
    border-color: #aaa !important;
}