SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2001
    Location
    DC
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS trick to indicate a required field in IE6 and FF?

    I have some form inputs and I'm using the html label tag to indicate the input labels. I would like to add an asterisk to the end of a label if it's class is required. For example I have the following in my CSS:

    /* this is for non-required labels */
    LABEL
    {
    font-weight:bold;
    }

    /* this is for required labels */
    LABEL.fieldLabelRequired
    {
    font-weight:bold;
    }

    /* this is what I'm using to indicate the field is required */
    LABEL.fieldLabelRequired:after
    {
    content:" *";
    color:#FF0000;
    font-weight:bold;
    }

    I would implement this as follows:

    <label>not required</label>
    <label class="required">required field</label>

    The above works great until you try to use IE. I just need something like this that works in FF and IE6. Any suggestions?
    signature

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately IE does not support the :after pseudoclass... Alternatives (that may or may not fit in with your site design) would be to make the labels of required fields bold and those of optional fields normal. Or use a different color for required fields. Or float the asterisk to the right of the label. The important thing is to distinguish required from optional fields somehow...

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2001
    Location
    DC
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response. I understand the other routes and why. I would be nice if I could control it by a style that doesn't involve color. 20% of men are color blind. I realize I could underline or something else but adding a symbol to the left or right of a field label would be perfect!

    Anyone else?
    signature

  4. #4
    SitePoint Member fvanlerberghe's Avatar
    Join Date
    May 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could make a gif of your asterisk, and add it as a background-image to any label tag with class "required":

    label.required {
    background: url(images/asterisk.gif) top right no-repeat;
    padding-right:15px;
    }
    Filip Vanlerberghe
    Usability specialist - Web designer - Kortrijk - Belgium
    Use Webdesign
    User-friendly and accessible webdesign

  5. #5
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We handle this using a background image on required fields. I've found it is more visually appealing if asterisks line up which means putting it on the left of the label and having the same padding-left for required and non-required labels so they line up nicely with or without the required field marker.

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ChrisOSX
    We handle this using a background image on required fields. I've found it is more visually appealing if asterisks line up which means putting it on the left of the label and having the same padding-left for required and non-required labels so they line up nicely with or without the required field marker.
    But a background image provides no cue to the user if images are turned off, or if CSS is turned off/replaced. Using an img tag with an alt of "required" or similar is probably a better approach in this case for accessibility purposes.

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2001
    Location
    DC
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChrisOSX
    We handle this using a background image on required fields. I've found it is more visually appealing if asterisks line up which means putting it on the left of the label and having the same padding-left for required and non-required labels so they line up nicely with or without the required field marker.
    Great! Could you add a simple example with your code?

    I'm curious how you implement this technique. Do you set the image to a LABEL tag? To a span tag next to a required label? How do you do it?
    signature

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2001
    Location
    DC
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    But a background image provides no cue to the user if images are turned off, or if CSS is turned off/replaced. Using an img tag with an alt of "required" or similar is probably a better approach in this case for accessibility purposes.
    OK but I have a known audience and they do not turn off CSS or Images.
    signature


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •