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

一位同事刚刚问我是否知道一种方法，可以只显示一个选择框选项标记的值，而不显示在开始和结束选项标记之间的文本，而不必使用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>

---选择CFDA--
93.003救灾
93.101 PPW
93.102 RWC
93.104公司通信Mntl Hlth服务（Sed）
93.109链接
93.119技术助理Ctr评估
为古巴参赛者提供93.120 MH服务
93.122 RRCD
93.125 MH规划与维护；示范
93.128 MH统计改进项目
93.131附件c
93.132管理式护理（MC）
93.138 P&；精神病患者的治疗方案
93.144高危青年人口
93.148示范项目
93.150径
93.169
93.170 CYAP
93.171整笔补助金
93.174会议补助金
93.175环绕
93.179 SP-SD
93.194社区伙伴关系补助金
93.195
93.196个目标城市（TC）
93.216艾滋病毒/艾滋病示范项目
93.218 Subst虐待治疗会议补助金
93.229
93.230 KDA
93.238
93.239政策研究和评估补助金（ASPE）
93.242
93.243具有区域和国家意义的项目
93.244 MH临床或服务相关Tr
93.274临床培训补助金/FD
93.275获得复原补助金
93.276 ONDCP无毒品社区
93.901通信合作协议
93.902临界人口（CP）
93.903刑事司法（CJN）
93.911校园
93.937
93.949艾滋病毒/艾滋病
93.950扩容（CP）
93.958 CMHS整笔补助金
93.959 SAPT整体补助金
93.982灾害援助和援助；紧急
93.992整笔补助金

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

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

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

但是在流行的浏览器中，Firefox似乎是唯一一个支持为

选项

元素生成内容的浏览器

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

option { content: attr(value); }

---

但是，这种扩展（对真实元素使用

内容
，而不仅仅是
：before
和
：after
伪元素）似乎仅由Opera支持，并且它不支持
选项
元素的扩展（或生成的内容）。
您需要修改CMS来实现这一点。您使用的是什么CMN？这在CSS中是不可能的。不，仅使用CSS无法做到这一点。在您的情况下，唯一的可能是限制选择框的宽度，使其仅显示内容的第一部分（看起来与您案例中的值相对应）。尽管这在跨浏览器中可能很难做到，而且在很大程度上是一项工作。@w3d是的，有点：不管生成的内容如何，Firefox似乎是唯一支持
选项上
伪元素
之后的浏览器。
选项
元素被视为被替换的元素，并且未定义被替换元素上的
：before
和
：after
伪元素，因此其他浏览器没有错。