CODEWITHSUNDEEP
htmlcss
Flora
Flora

Reputation: 563

How to use CSS 'content' property with the 'option' tag?

How to add CSS 'content' to the 'option' tag? I would like to achieve e.g: "Name: Volvo".

<html>
<head>
<style>
  option:before {
    content: "Name: ";
  }
</style>
</head>
<body>
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
</body>
</html>

Upvotes: 1

Views: 333

Answers (1)

Naga Sai A
Naga Sai A

Reputation: 10975

Unfortunately, pseudo-elements don't work for image, input, select options.

One option is to wrap select inside and div and use :before content

<body>
  <div>
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  </div>
</body>

CSS:

div::before{
  content:"Name: "
}

https://codepen.io/nagasai/pen/PRwreg

Other option is to use javascript or jQuery to add content "Name:"

Upvotes: 2

Related Questions