커스텀 셀렉트 옵션 > 웹개발팁


웹개발팁

모아보자 [기타] 커스텀 셀렉트 옵션 웹개발팁

[기타] 커스텀 셀렉트 옵션

본문

 
<style> 
/*the container must be positioned relative:*/ 
.custom-select { 
  position: relative; 
  font-family: Arial; 
} 
  
.custom-select select { 
  display: none; /*hide original SELECT element:*/ 
} 
  
.select-selected { 
  background-color: DodgerBlue; 
} 
  
/*style the arrow inside the select element:*/ 
.select-selected:after { 
  position: absolute; 
  content: ""; 
  top: 14px; 
  right: 10px; 
  width: 0; 
  height: 0; 
  border: 6px solid transparent; 
  border-color: #fff transparent transparent transparent; 
} 
  
/*point the arrow upwards when the select box is open (active):*/ 
.select-selected.select-arrow-active:after { 
  border-color: transparent transparent #fff transparent; 
  top: 7px; 
} 
  
/*style the items (options), including the selected item:*/ 
.select-items div,.select-selected { 
  color: #ffffff; 
  padding: 8px 16px; 
  border: 1px solid transparent; 
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; 
  cursor: pointer; 
  user-select: none; 
} 
  
/*style items (options):*/ 
.select-items { 
  position: absolute; 
  background-color: DodgerBlue; 
  top: 100%; 
  left: 0; 
  right: 0; 
  z-index: 99; 
} 
  
/*hide the items when the select box is closed:*/ 
.select-hide { 
  display: none; 
} 
  
.select-items div:hover, .same-as-selected { 
  background-color: rgba(0, 0, 0, 0.1); 
} 
</style> 
 
<div class="custom-select" style="width:200px;"> 
  <select> 
    <option value="0">선택:</option> 
    <option value="1">Audi</option> 
    <option value="2">BMW</option> 
    <option value="3">Citroen</option> 
    <option value="4">Ford</option> 
    <option value="5">Honda</option> 
    <option value="6">Jaguar</option> 
    <option value="7">Land Rover</option> 
    <option value="8">Mercedes</option> 
    <option value="9">Mini</option> 
    <option value="10">Nissan</option> 
    <option value="11">Toyota</option> 
    <option value="12">Volvo</option> 
  </select> 
</div> 
<script> 
var x, i, j, selElmnt, a, b, c; 
/*look for any elements with the class "custom-select":*/ 
x = document.getElementsByClassName("custom-select"); 
for (i = 0; i < x.length; i++) { 
  selElmnt = x[i].getElementsByTagName("select")[0]; 
  /*for each element, create a new DIV that will act as the selected item:*/ 
  a = document.createElement("DIV"); 
  a.setAttribute("class", "select-selected"); 
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; 
  x[i].appendChild(a); 
  /*for each element, create a new DIV that will contain the option list:*/ 
  b = document.createElement("DIV"); 
  b.setAttribute("class", "select-items select-hide"); 
  for (j = 1; j < selElmnt.length; j++) { 
    /*for each option in the original select element, 
    create a new DIV that will act as an option item:*/ 
    c = document.createElement("DIV"); 
    c.innerHTML = selElmnt.options[j].innerHTML; 
    c.addEventListener("click", function(e) { 
        /*when an item is clicked, update the original select box, 
        and the selected item:*/ 
        var y, i, k, s, h; 
        s = this.parentNode.parentNode.getElementsByTagName("select")[0]; 
        h = this.parentNode.previousSibling; 
        for (i = 0; i < s.length; i++) { 
          if (s.options[i].innerHTML == this.innerHTML) { 
            s.selectedIndex = i; 
            h.innerHTML = this.innerHTML; 
            y = this.parentNode.getElementsByClassName("same-as-selected"); 
            for (k = 0; k < y.length; k++) { 
              y[k].removeAttribute("class"); 
            } 
            this.setAttribute("class", "same-as-selected"); 
            break; 
          } 
        } 
        h.click(); 
    }); 
    b.appendChild(c); 
  } 
  x[i].appendChild(b); 
  a.addEventListener("click", function(e) { 
      /*when the select box is clicked, close any other select boxes, 
      and open/close the current select box:*/ 
      e.stopPropagation(); 
      closeAllSelect(this); 
      this.nextSibling.classList.toggle("select-hide"); 
      this.classList.toggle("select-arrow-active"); 
    }); 
} 
function closeAllSelect(elmnt) { 
  /*a function that will close all select boxes in the document, 
  except the current select box:*/ 
  var x, y, i, arrNo = []; 
  x = document.getElementsByClassName("select-items"); 
  y = document.getElementsByClassName("select-selected"); 
  for (i = 0; i < y.length; i++) { 
    if (elmnt == y[i]) { 
      arrNo.push(i) 
    } else { 
      y[i].classList.remove("select-arrow-active"); 
    } 
  } 
  for (i = 0; i < x.length; i++) { 
    if (arrNo.indexOf(i)) { 
      x[i].classList.add("select-hide"); 
    } 
  } 
} 
/*if the user clicks anywhere outside the select box, 
then close all select boxes:*/ 
document.addEventListener("click", closeAllSelect); 
</script> 

첨부파일


모바일버전 RSS SITEMAP