我可以使用css显示选择框的值吗？

Question

一位同事问我是否知道如何在开始和结束选项标签之间显示选择框选项标签的值，而不必使用javascript。我还没有找到如何完成这一点的方法。有没有办法做到这一点？

的示例代码如下：

<select name="ctl00$ctl00$ContentMain$contentbody$ddlCFDA"  id="ContentMain_contentbody_ddlCFDA" class="wide"> 
<option value=""> --- Select CFDA --- </option> 
<option value="93.003">93.003 Disaster Relief</option> 
<option value="93.101">93.101 PPW</option> 
<option value="93.102">93.102 RWC</option> 
<option value="93.104">93.104 Comp Comm Mntl Hlth Serv (Sed)</option> 
<option value="93.109">93.109 Link</option> 
<option value="93.119">93.119 Technical Asst Ctr Evaluation</option> 
<option value="93.120">93.120 MH Serv For Cuban Entrants</option> 
<option value="93.122">93.122 RRCD</option> 
<option value="93.125">93.125 MH Planning &amp; Demonstration</option> 
<option value="93.128">93.128 MH Statistics Improvement Prog</option> 
<option value="93.131">93.131 ATTC</option> 
<option value="93.132">93.132 Managed Care (MC)</option> 
<option selected="selected" value="93.138">93.138 P&amp;A For Individuals With Mental Illness</option> 
<option value="93.144">93.144 High-Risk Youth Population</option> 
<option value="93.148">93.148 Demonstration Prog Homeless</option> 
<option value="93.150">93.150 PATH</option> 
<option value="93.169">93.169 </option> 
<option value="93.170">93.170 CYAP</option> 
<option value="93.171">93.171 Block Grant</option> 
<option value="93.174">93.174 Conference Grants</option> 
<option value="93.175">93.175 Wrap Around</option> 
<option value="93.179">93.179 SP-SD</option> 
<option value="93.194">93.194 Community Partnership Grant</option> 
<option value="93.195">93.195 </option> 
<option value="93.196">93.196 Target Cities (TC)</option> 
<option value="93.216">93.216 HIV/AIDS Demonstration Prog</option> 
<option value="93.218">93.218 Subst Abuse Treatment Conference Grants</option> 
<option value="93.229">93.229 </option> 
<option value="93.230">93.230 KDA</option> 
<option value="93.238">93.238 </option> 
<option value="93.239">93.239 Policy Research and Evaluation Grants (ASPE)</option> 
<option value="93.242">93.242 </option> 
<option value="93.243">93.243 Programs of Regional and National Significance</option> 
<option value="93.244">93.244 MH Clinical Or Serv Related Tr</option> 
<option value="93.274">93.274 Clinical Training Grant/FD</option> 
<option value="93.275">93.275 Access to Recovery Grants</option> 
<option value="93.276">93.276 ONDCP Drug Free Communities</option> 
<option value="93.901">93.901 Communications Coop Agreements</option> 
<option value="93.902">93.902 Critical Population (CP)</option> 
<option value="93.903">93.903 Criminal Justice (CJN)</option> 
<option value="93.911">93.911 Campus</option> 
<option value="93.937">93.937 </option> 
<option value="93.949">93.949 HIV/AIDS</option> 
<option value="93.950">93.950 Capacity Expansion (CP)</option> 
<option value="93.958">93.958 CMHS Block Grant</option> 
<option value="93.959">93.959 SAPT Block Grant</option> 
<option value="93.982">93.982 Disaster Assistance &amp; Emerg</option> 
<option value="93.992">93.992 Block Grant</option> 

</select> 

Answer 1

在实际应用中，它不能在CSS做（这是很难看到它为什么应该可以在CSS做，如果这是可能的）。

在理论方面，原则上在元素内容之后使用生成的内容添加内容，例如，

option:after { content: attr(value); } 

但流行的浏览器中，火狐似乎是支持生成的option元素含量的唯一一个。

option { content: attr(value); } 

但是这个扩展一般（使用content真正的元素，而不仅仅是:before和:after：

更从理论上说，你可以内容通过使用建议延长到生成内容的机制取代伪元素）似乎仅受Opera支持，并且它不支持option元素（或者根本不支持生成的内容）。