如何隐藏选择框的默认箭头并设置所需的图像？

-1

我想要做的就是隐藏HTML Form Element的选择框的默认箭头，并将其替换为我的Desired Arrow图像。我尝试了很多东西，但找不到确切的解决方案，它适用于每个浏览器的IE，Firefox，Chrome等。这里是我的代码在这个问题：Can't set position of background in IE 10 or Less 如何隐藏选择框的默认箭头并设置所需的图像？

因为没有人回答它所以，这是为什么我再问一次如果有人能给我一个干净的代码。

感谢，

请让我知道在评论，如果你认为这个问题不好或者没有解释好。

来源

2014-08-30 M3Dev

哇，这么多可怕的回答这个问题。 – 2014-08-30 17:52:29

这里是演示：http://www.tutorialrepublic.com/codelab.php?topic=faq&file=custom-select-box

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Custom Select Box with CSS and jQuery</title> 
<style type="text/css"> 
    .select-wrapper{ 
     float: left; 
     display: inline-block; 
     border: 1px solid #d8d8d8;    
     background: url("../images/dropdown.png") no-repeat right center; 
     cursor: pointer; 
    } 
    .select-wrapper, .select-wrapper select{ 
     width: 200px; 
     height: 26px; 
     line-height: 26px; 
    } 
    .select-wrapper:hover{ 
     background: url("../images/dropdown-hover.png") no-repeat right center; 
     border-color: #239fdb; 
    } 
    .select-wrapper .holder{ 
     display: block; 
     margin: 0 35px 0 5px; 
     white-space: nowrap;    
     overflow: hidden; 
     cursor: pointer; 
     position: relative; 
     z-index: -1; 
    } 
    .select-wrapper select{ 
     margin: 0; 
     position: absolute; 
     z-index: 2;    
     cursor: pointer; 
     outline: none; 
     opacity: 0; 
     /* CSS hacks for older browsers */ 
     _noFocusLine: expression(this.hideFocus=true); 
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
     filter: alpha(opacity=0); 
     -khtml-opacity: 0; 
     -moz-opacity: 0; 
    } 

    /* Let's Beautify Our Form */ 
    form{ 
     margin: 20px; 
    } 
    input[type="submit"]{ 
     float: left; 
     background: #d8d8d8; 
     border: 1px solid #c4c4c4; 
     margin-left: 10px; 
     padding: 4px 10px; 
     cursor: pointer; 
     outline: none; 
    } 
    input[type="submit"]:hover{ 
     color: #fff; 
     border-color: #1b7aa9; 
     background-color: #239fdb; 
    } 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".custom-select").each(function(){ 
      $(this).wrap("<span class='select-wrapper'></span>"); 
      $(this).after("<span class='holder'></span>"); 
     }); 
     $(".custom-select").change(function(){ 
      var selectedOption = $(this).find(":selected").text(); 
      $(this).next(".holder").text(selectedOption); 
     }).trigger('change'); 
    }) 
</script> 
</head> 
<body> 
    <form action="../faq/select-action.php" method="post"> 
     <p>What Is Your Favourite Time Pass:</p>   
     <select name="timepass" class="custom-select"> 
      <option>Select</option> 
      <option>Driving</option> 
      <option>Internet</option> 
      <option>Movie</option> 
      <option>Music</option> 
      <option>Reading</option> 
      <option>Sports</option>     
     </select> 
     <input type="submit" value="Submit"> 
    </form> 
</body> 
</html>

来源

2014-08-31 07:43:16 MWT

如何隐藏选择框的默认箭头并设置所需的图像？

回答

相关问题