#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    192
    Rep Power
    0

    CSS: Form Elements


    I want to modify form elements. For example, I would like to change the background color/border style/border color of my input boxes, as well as my submit buttons. I would also like to change the spacing that is automatically placed under a FORM element, as it messes up my layout. Thanks in advance!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    The safe option is to define a CSS class and add this class to your elements.
    Code:
    .myinputs {
    	background-color: red;
    	border: 1px solid blue;
    }
    <input type="text" name="mytext" class="myinputs">
    The more modern browsers also support CSS attribute selectors (IE5.5 does not support it):
    Code:
    input[type="text"], input[type="submit"] {
    	background-color: red;
    	border: 1px solid blue;
    }
    Check here for all CSS properties: http://www.w3.org/TR/CSS2/propidx.html

    Hope this helps,
    Jeroen
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    2
    Rep Power
    0
    Jerom, this does not work for SELECT tags though. I can't get the background color to change for a select tag using a CSS class. Here is the code using ASP to populate the drop-down list.:

    <STYLE TYPE="text/css">
    .viewmode {background-color:transparent; border:1px solid #BE9D9D}
    .editmode {none}
    </STYLE>

    <select size="1" id="BSite" name="BSite" class="viewmode" style="width: 396; height:396">
    <%Response.Write("<option selected value=""Null""></option>")
    Do While Not SiteRs.EOF
    if SiteRs.fields("SiteID") = fSiteID then
    Response.Write("<option selected value=" & SiteRs("SiteID") & """>" & _
    SiteRs("SiteNumber") & " - " & SiteRs("SiteDescription") & "</option>")
    else
    Response.Write("<option value=" & SiteRs("SiteID") & """>" & _
    SiteRs("SiteNumber") & " - " & SiteRs("SiteDescription") & "</option>")
    end if
    SiteRs.movenext
    Loop
    Set SiteRs=Nothing
    %>
    </select>

    The ASP code above works though I have modified it here. The point is the class="viewmode" doesn't work for the SELECT tags but does work for the INPUT tags.

    Any idea why?

    Originally posted by jerom
    The safe option is to define a CSS class and add this class to your elements.
    Code:
    .myinputs {
    	background-color: red;
    	border: 1px solid blue;
    }
    <input type="text" name="mytext" class="myinputs">
    The more modern browsers also support CSS attribute selectors (IE5.5 does not support it):
    Code:
    input[type="text"], input[type="submit"] {
    	background-color: red;
    	border: 1px solid blue;
    }
    Check here for all CSS properties: http://www.w3.org/TR/CSS2/propidx.html

    Hope this helps,
    Jeroen
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    IE has problems with 'transparent' at times...
    The background works fine in my Mozilla and Opera7 browsers.
    If you specifically give it a color, IE will display it (unless there's a background-color for the option elements defined. If you define a background color for an option, IE 5.5 applies it to the selectbox as well.).

    Opera is the only one that really gets the border of a select box right (try a border of 100px).
    Mozilla seems to be the only one that lets you correctly define a border for a selectbox option. Opera simply ignores it.

    Jeroen
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    2
    Rep Power
    0
    Specifying a color works perfectly. Your right, transparency is a problem with SELECT boxes. Thanks Jeroen for your quick reply!

IMN logo majestic logo threadwatch logo seochat tools logo