1

一位同事刚刚问我是否知道一种方法来显示选择框选项标签的值，而不是显示打开和关闭选项标签之间的文本，而无需使用 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>
4

1 回答 1

2

实际上，它不能在 CSS 中完成（如果可能的话，很难理解为什么应该在 CSS 中完成）。

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

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

但在流行的浏览器中，Firefox 似乎是唯一支持为option元素生成内容的浏览器。

从理论上讲，您可以通过对生成的内容机制使用建议的扩展来替换内容：

option { content: attr(value); }

但是这个扩展一般（用于真实元素，而content不仅仅是伪元素）似乎只被 Opera 支持，并且它不支持它（或根本不支持生成的内容）元素。:before:afteroption

于 2012-08-13T20:29:07.443 回答