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); }

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

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

option { content: attr(value); }

但是这个扩展一般（使用content用于真实元素，而不仅仅是:before和:after伪元素）似乎仅受Opera支持，并且它不支持它（或者为option元素生成内容。

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

1 个答案: