css를 사용하여 선택 상자의 값을 표시 할 수 있습니까?

Question

공동 작업자가 자바 스크립트를 사용하지 않고도 시작 옵션 태그와 닫기 옵션 태그 사이에 텍스트의 선택 상자 옵션 태그 인 insteasd 값을 표시하는 방법을 알고 있는지 질문했습니다. 나는 이것을 성취하는 방법을 찾지 못했습니다. 이것을 할 거리가 있습니까?

의 샘플 코드는 다음과 같습니다 :

<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 요소의 컨텐츠를 생성 지원하는 유일한 하나가 될 것으로 보인다. (실제 요소뿐만 아니라 :before 및 :after을 content를 사용

option { content: attr(value); } 

그러나 일반적으로이 확장 : 더욱 이론적으로

, 당신은 컨텐츠 생성 된 내용 메커니즘에 제안 된 확장명을 사용하여을 대체 할 수 pseudoelements)은 오페라에서만 지원되는 것으로 보이며, option 요소에 대해서는 그것을 지원하지 않습니다 (또는 전혀 생성 된 콘텐츠).