Html定製選擇標籤使用CSS和Div

Question

好吧，所以我想創建一個自定義的HTML選擇框使用CSS和DIV跨度。 我沒有看到任何錯誤，但不知道爲什麼它不工作

這裏是fiddle

<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語句是這樣的：

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

Answer 2

要使請按照本教程選擇使用divs：http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/

Answer 3

根據選擇部分的考慮，您應該使用內置選擇 - 選項對完美工作。如果你堅持爲此目的使用DIV，那麼你必須在那裏使用一些JavaScript來使它工作。

按我的意見，你應該自定義選擇選項，爲你喜歡這個工作，

.custom-select { 
 
\t position: relative; 
 
\t 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 { 
 
\t width: 100%; 
 
\t margin: 0; 
 
\t outline: none; 
 
\t padding: .6em .8em .5em .8em; 
 

 
\t /* Prefixed box-sizing rules necessary for older browsers */ 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 

 
\t /* Font size must be 16px to prevent iOS page zoom on focus */ 
 
\t 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 { 
 
\t content: " "; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t right: 1em; 
 
\t z-index: 2; 
 
\t /* These hacks make the select behind the arrow clickable in some browsers */ 
 
\t pointer-events: none; 
 
\t display: none; 
 
} 
 
@supports (-webkit-appearance: none) or (appearance: none) 
 
\t /* Firefox <= 34 has a false positive on @supports(-moz-appearance: none) 
 
\t * @supports (mask-type: alpha) is Firefox 35+ 
 
\t */ 
 
\t or ((-moz-appearance: none) and (mask-type: alpha)) { 
 
\t 
 
\t /* Show custom arrow */ 
 
\t .custom-select::after { 
 
\t \t display: block; 
 
\t } 
 

 
\t /* Remove select styling */ 
 
\t .custom-select select { 
 
\t \t padding-right: 2em; /* Match-01 */ 
 
\t \t /* inside @supports so that iOS <= 8 display the native arrow */ 
 
\t \t background: none; /* Match-04 */ 
 
\t \t /* inside @supports so that Android <= 4.3 display the native arrow */ 
 
\t \t border: 1px solid transparent; /* Match-05 */ 
 

 
\t \t -webkit-appearance: none; 
 
\t \t -moz-appearance: none; 
 
\t \t appearance: none; 
 
\t } 
 
\t .custom-select select:focus { 
 
\t \t border-color: #aaa; /* Match-03 */ 
 
\t } 
 
} 
 
.custom-select { 
 
\t border: 3px solid #303840; 
 
\t background: #56B4F9; 
 
} 
 

 
.custom-select::after { 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-left: 4px solid transparent; 
 
\t border-right: 4px solid transparent; 
 
\t border-top: 7px solid #303840; 
 
\t margin-top: -3px; 
 
} 
 

 
.custom-select select { 
 
\t font-family: 'Source Sans Pro', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
\t letter-spacing: 0px; 
 
\t font-weight: 700; 
 
\t color: #303840; 
 
\t line-height: 1.5; 
 
\t cursor: pointer; 
 
} 
 

 

 
/* Focus style */ 
 

 
.custom-select select:focus { 
 
\t outline: none; 
 
\t box-shadow: none; 
 
\t border: 1px solid transparent; 
 
} 
 

 

 
/* Set options to normal weight */ 
 

 
.custom-select option { 
 
\t font-weight: bold; 
 
\t background: #fff; 
 
\t box-shadow: none; 
 
}

<span>Choose an effect:</span> 
 
<div class="custom-select"> 
 
\t \t <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> 
 
\t \t </select> 
 
</div>

Answer 4

根據項目的性質，也就是使用div元素多重原因風格化select可能是一個壞主意。僅舉幾例：

• 您不會從原生移動瀏覽器UI支持中受益。
• 您也可能會遇到可訪問性和可用性的副作用。

如果您想了解詳情，請點擊這裏here。

如果你仍然認爲你需要這個，我懷疑試圖修復你提供的JSFiddle將提供良好的投資回報。你需要更多的東西來獲得更好的選擇（包括一些不可忽略的JavaScript）。我的建議是尋找到流行的現有解決方案到那​​裏，而不是，如：

1. 選擇二：https://select2.github.io/examples.html
2. 引導選：http://silviomoreto.github.io/bootstrap-select/examples/
3. Selectize.js：http://selectize.github.io/selectize.js/
4. 等等