CODEWITHSUNDEEP
htmlcssselectreplace
COBOL-love
COBOL-love

Reputation: 19

How to select and change value in dropdown list <select> via CSS

Thanks in advance for the help.

Given the HTML below, how might one use CSS to find the "Please Select..." value in the dropdown and replace it with "Choose a State"?

<span class="label"><label for="state">STATE</label></span>

<select id="state" name="state" class="inputbox" size="1">
    <option value="">Please Select...</option>
    <option value="AL" class="USA">AL</option>
    <!--truncated for brevity -->
    <option value="WI" class="USA">WI</option>
</select>

Thanks again!

Upvotes: 1

Views: 1478

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

This cannot be done using CSS. (CSS cannot query your document for content strings and replace)

Use JavaScript or a popular JS library designed for DOM manipulation like jQuery

Example using 

$("#state option").text(function(idx, txt) {
  if(txt==="Please Select...") return "Choose a State";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="label"><label for="state">STATE</label></span>
<select id="state" name="state" class="inputbox" size="1">
  <option value="">Please Select...</option>
  <option value="AL" class="USA">AL</option>

  (truncated for brevity) 

  <option value="WI" class="USA">WI</option>
</select>

Upvotes: 1

Related Questions