3 replies [Last post]
draines
draines's picture
Offline
newbie
San Diego
Last seen: 10 years 49 weeks ago
San Diego
Timezone: GMT-7
Joined: 2010-03-03
Posts: 3
Points: 5

I'm trying to use the :before or :after pseudo classes on the following select and option elements in conjunction with the content CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
 
<style>
 
option:before {content:'Sample';}
 
</style>
 
</head>
 
<body>
 
    <select>
        <option></option>
    </select>
 
</body>
</html>

Is it possible to do so?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Welcome to the forum.

When you ask, "is it possible to do so", I have to ask if you've tried it. Have you? What was the actual html and css? What was the result?[1]

To give you a leg up, see my little demo, form layout using css, and its associated stylesheet form.css.

cheers,

gary

1. Be sure to read the sticky posts at the top of each forum. There are a pot load of info on commonly asked issues, and our little statement on what we expect folks to bring to the party.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

draines
draines's picture
Offline
newbie
San Diego
Last seen: 10 years 49 weeks ago
San Diego
Timezone: GMT-7
Joined: 2010-03-03
Posts: 3
Points: 5

Yes, I have tried it.

Hi, Gary. Thanks for the reply. Yes, I have tried several variations on it. I have also scoured the Net looking for info on it, but trying to do a search with the keywords 'before,' 'after,' 'select,' 'option,' and 'content' will not necessarily get you the results you want.

I looked for an answer here but did not come up with one. Perhaps there isn't one. I don't know. I was hoping if I could clarify the question I might get a more reliable response.

Thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Sorry, I thought I had given

Sorry, I thought I had given you a hint. Form controls are inline replaced widgets. Adding text doesn't make sense, and isn't doable, to my knowledge. Add the generated text to a related element that can hold text, for example, the accompanying label element:

<p><label for="state">State</label>
  <select name"state" id="state">
    <option>New York</option>
  </select>
</p>
===============
label:before {
    content: "Sample ";
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.