自定義select下拉框樣式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>select美化自定義下拉框樣式 - 站長素材</title> </head> <style> /* 公共樣式 */ * { padding: 0; margin: 0; list-style: none; font-size: 14px; } .hide { display: none; } input { outline: none; } /* 模擬下拉框 */ .select { position: relative; margin: 50px 0 0 100px; } .select .input_in input { width: 188px; height: 20px; background: url(img/select.png) no-repeat right center; line-height: 20px; padding: 10px 0 10px 10px; border: 1px solid #d6d6d6; cursor: pointer; } .select .city { position: absolute; top: 40px; left: 0; } .select .city ul { width: 198px; border: 1px solid #d6d6d6; border-top: none; } .select .city ul li { padding-left: 10px; width: 188px; height: 40px; line-height: 40px; cursor: pointer; } </style>
<body>
<div class="select">
<div class="input_in"> <input type="text" value="D.C" /></div>
<div class="city hide">
<ul>
<li>New York1</li>
<li>New York2</li>
<li>New York3</li>
<li>New York4</li>
<li>New York5</li>
<li>New York6</li> </ul> </div> </div> <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script> <script> $(function() {
//模擬下拉框 $('.select input').on('click', function() { if($('.select .city').is('.hide')) { $('.select .city').removeClass('hide'); } else { $('.select .city').addClass('hide'); } }) $('.select ul li').on('click', function() { $('.select input').val($(this).html()); $('.select .city').addClass('hide'); $('.select input').css('border-bottom', '1px solid $d6d6d6'); }) $('.select ul li').hover( function() { $(this).css({ 'backgroundColor': '#fd9', 'font-size': '18px' }); }, function() { $(this).css({ 'backgroundColor': '#fff', 'font-size': '14px' }); } )
}) </script>
</body>
</html>