Select tag: Hide native arrows of IE 10, 11 in CSS / CSS로 Select 태그의 네이티브 화살표 숨기기

 Hide native arrows of IE 10, 11 in CSS

/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand {
  display: none;
}

/*select 태그 네이티브 화살표 숨기기*/
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}


code practice
------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand {display: none;}
.favcity-wrapper {position:relative;}
.visuallyhidden {  border: 0;  clip: rect(0 0 0 0);  height: 1px;  margin: -1px;  padding: 0;  position: absolute;  }
select {  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  border-radius: 0; width:100%;}
label[for=favcity] {  position: relative;  display: block;  }
label[for=favcity] select {  border: 5px solid #000;  background: white;  padding: 7px 20px 7px 20px;  width: 100%;  font-size: 16px;  cursor: pointer;}
label[for=favcity]::after {  content: ' ';  position: absolute;  right: 10px;  top: 1px;  width: 3px;  height: 3px;  display: block; border: solid black;  border-width: 0 3px 3px 0;  display: inline-block;  padding: 3px; transform: rotate(45deg);   -webkit-transform: rotate(45deg);}
label[for=favcity] select::-ms-expand {    display: none;}
</style>
</head>
<body>
<div class="favcity-wrapper">
<label for="favcity" class="visuallyhidden"></label>
<select id="favcity" name="select">
<option value="0">00001</option>
<option value="1">00002</option>
<option value="2">00003</option>
<option value="3">00004</option>
</select>
</div>
</body>
</html>

댓글

댓글 쓰기

이 블로그의 인기 게시물

Lottery in javascript / 자바스크립트로 경품추첨기 만들기

<style> body{font-size:9pt;} #panel{border:1px #000000 solid; line-height:400px; font-size:100px; width:400px; height:400px; text-align:center; vertical-align:middle;} </style> <script> var panel; var nTimerID; var labTotal; var nTotalMember; window.onload=function(){ this.init();// 요소 초기화 실행. this.initEventListener();// 이벤트 초기화 실행. } function init(){// 요소 초기화. this.panel = document.getElementById("panel");// 숫자가 출력될 #panel을 찾아 전역변수에 담아둡니다. this.nTimerID = 0;// 참여인원 정보가 입력된 패널을 찾아 전역변수에 담아둡니다. this.labTotal = document.getElementById("lab_total"); this.nTotalMember = 0; } function initEventListener(){// 이벤트 초기화. var btnStart = document.getElementById("btn_start"); btnStart.addEventListener("click", function(){ startTimer(); },false); var btnStop = document.getElementById("btn_stop"); btnStop.addEventListener("click...
자세한 내용 보기

Quick Menu(flying menu) in jQuery / 제이쿼리로 퀵메뉴 바 만들기

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <title>scroll_menu</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .wrap {width:1000px; height:3000px; background-color:#cdcdcd; margin:0 auto;} #q_menu {width:80px; height:300px; border: 1px solid #000; position: absolute; margin-left: 1000px; margin-top: 150px;} #textDiv {position: absolute;} </style> <script type="text/javascript"> $(document).ready( function(){ $('#q_menu').animate({'top':$(document).scrollTop()+20+'px'},500);//처음시작하는위치 $(window).scroll(function(){ $('#q_menu').stop(); $('#q_menu...
자세한 내용 보기

Accordion Menu in jQuery / 제이쿼리로 아코디언 메뉴 만들기

<div class="menu">menu01</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <div class="menu">menu02</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <style> .accordion {display:none;} .menu.on {color:red;} </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function(){ /*메뉴 아코디언*/   $('.accordion').hide();   $('.menu').click(function(){ $(this).toggleClass('on')         $(this).next().slideToggle();   }); }); </script>
자세한 내용 보기