SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    styling value attribute in input field type

    hi,
    is there anyway to css the value="" attribute of input fields?
    All those who wander aren't lost.

  2. #2
    SitePoint Addict bronze trophy
    Join Date
    Sep 2005
    Posts
    323
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Do you mean target input areas that have the attribute value="" and style them? Or to use CSS to make input areas have the value = ""?

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i want to style value="First Name", so i can css and style First Name text accordingly.
    All those who wander aren't lost.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,582
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    nofel, try this CSS3 selector:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Target a Selector by Attribute Value</title>
        <style type="text/css">
    
    input[value^="First"] {color:red;}
    input[value^="Middle"] {color:green;}
    input[value^="Last"] {color:blue;}
    
        </style>
    </head>
    <body>
    
    <input value="First Name">
    <input value="Middle Name">
    <input value="Last Name">
    
    </body>
    </html>
    If you need to target older, non-compliant browsers, you will have to assign a class to the <input> field and style it via it's class.


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
  •