HTML使用CSS和Divs自定义选择标签

Question

好的，所以我试图使用css和divs跨度创建一个自定义html选择框。 我没有看到任何错误，但不知道为什么它不起作用

这是小提琴

<div class="ik_select episodes_list_selectbox ik_select_autowidth" style="position: relative; width: 258px;">
<div class="ik_select_link episodes_list_selectbox-link">
<div class="ik_select_link_text">active opt 4</div></div>
<div class="ik_select_dropdown episodes_list_selectbox-dd" style="position: absolute; z-index: 9998; width: 100%; display: none;">
<div class="ik_select_list" style="position: relative;">
<div class="ik_select_filter_wrap">

Answer 1

基本的选择语句如下所示：

<select class="yourStyle">
    <option>option_1</option>
    <option>option_2</option>
</select>

Answer 2

考虑到选择部分，您应该使用内置的选择选项对来完美工作。 如果您坚持要为此目的使用DIV，那么必须在那儿使用一些JavaScript才能使其正常工作。

根据我的意见，您应该自定义选择选项以使其适合您，

 .custom-select { position: relative; display: block; } /* This is the native select, we're making everything but the text invisible so * we can see the button styles in the wrapper */ .custom-select select { width: 100%; margin: 0; outline: none; padding: .6em .8em .5em .8em; /* Prefixed box-sizing rules necessary for older browsers */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* Font size must be 16px to prevent iOS page zoom on focus */ font-size: 16px; } /* Custom arrow sits on top of the select - could be an image, SVG, icon font, * etc. or the arrow could just baked into the bg image on the select. */ .custom-select::after { content: " "; position: absolute; top: 50%; right: 1em; z-index: 2; /* These hacks make the select behind the arrow clickable in some browsers */ pointer-events: none; display: none; } @supports ( -webkit-appearance: none ) or ( appearance: none ) /* Firefox <= 34 has a false positive on @supports( -moz-appearance: none ) * @supports ( mask-type: alpha ) is Firefox 35+ */ or ( ( -moz-appearance: none ) and ( mask-type: alpha ) ) { /* Show custom arrow */ .custom-select::after { display: block; } /* Remove select styling */ .custom-select select { padding-right: 2em; /* Match-01 */ /* inside @supports so that iOS <= 8 display the native arrow */ background: none; /* Match-04 */ /* inside @supports so that Android <= 4.3 display the native arrow */ border: 1px solid transparent; /* Match-05 */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-select select:focus { border-color: #aaa; /* Match-03 */ } } .custom-select { border: 3px solid #303840; background: #56B4F9; } .custom-select::after { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid #303840; margin-top: -3px; } .custom-select select { font-family: 'Source Sans Pro', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 0px; font-weight: 700; color: #303840; line-height: 1.5; cursor: pointer; } /* Focus style */ .custom-select select:focus { outline: none; box-shadow: none; border: 1px solid transparent; } /* Set options to normal weight */ .custom-select option { font-weight: bold; background: #fff; box-shadow: none; } 

 <span>Choose an effect:</span> <div class="custom-select"> <select name="select" id="select-effect"> <option value="1" selected>Triple Swoosh</option> <option value="2">Simple</option> <option value="3">Duo Move</option> <option value="4">Content Move</option> </select> </div> 

Answer 3

根据项目的性质，有多种原因导致使用div元素样式化select的想法可能是个坏主意。 仅举几例：

• 您将无法从本机移动浏览器UI支持中受益。
• 您还可能会遭受可访问性和可用性的副作用。

如果您想获取全部详细信息，请在此处找到有关该主题的很好的文章。

如果您仍然认为自己需要这样做，我怀疑尝试修复提供的JSFiddle是否会带来良好的投资回报。 为了获得良好的选择替代品（包括一些不可忽略的JavaScript），您需要做的还不止这些。 我的建议是研究流行的现有解决方案，例如：

1. Select2： https ： //select2.github.io/examples.html
2. 引导程序选择： http : //silviomoreto.github.io/bootstrap-select/examples/
3. Selectize.js： http ：//selectize.github.io/selectize.js/
4. 等等。