SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot choazart's Avatar
    Join Date
    Feb 2002
    Location
    So. California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS and checkboxes, textareas, and radio buttons

    Hello all,

    After lengthy google sessions and here at Sitepoint, there seems to be no way to CSS some <form> elements such as checkboxes, radio buttons, and text areas.

    Is there no one who knows of a way to do this?

    I've tried to create styles for these <form> elements with zero success.

    There's got to be a way.

    Mike

  2. #2
    SitePoint Zealot cwebmedia's Avatar
    Join Date
    Nov 2002
    Location
    Calgary, Alberta, Canada
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keep smiling ...
    It makes people wonder what you're up to ...

  3. #3
    SitePoint Zealot choazart's Avatar
    Join Date
    Feb 2002
    Location
    So. California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Close but,...

    Thanks for the quick reply.

    Perhaps I should have been more specific...

    I want to apply the same CSS formatting to my textareas and checkboxes as I did my texboxes.

    Specifically, the border colors and not the background colors.

    Thanks again,

    Mike

  4. #4
    SitePoint Zealot 19nine78's Avatar
    Join Date
    Feb 2002
    Location
    Ayr, scotland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what browser and what styles? Textareas shouldn't be a problem, but checkboxes and radios are.

    cheers

    alastair

  5. #5
    SitePoint Enthusiast Utopia's Avatar
    Join Date
    Sep 2002
    Location
    United Kingdom
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by cwebmedia
    Here is a quick tutorial!
    why thankyou!

  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)
    Checkboxes and radio buttons are problems, as the background colors are OUTSIDE of the "box" area when you style them, not inside. Selects have a problem with borders.

    --Vinnie

  7. #7
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.sitepointforums.com/showt...threadid=79682
    http://www.sitepointforums.com/showt...threadid=87386
    http://www.sitepointforums.com/showt...threadid=87818

    but yes, the short and sweet answer is: it can't be done (at least not in a standards-compliant, accessible way)
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  8. #8
    will code HTML for food Michel V's Avatar
    Join Date
    Sep 2000
    Location
    Corsica
    Posts
    552
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by vgarcia
    Checkboxes and radio buttons are problems, as the background colors are OUTSIDE of the "box" area when you style them, not inside. Selects have a problem with borders.
    Not so in Gecko-based browsers, where the background is inside the checkbox or radio button (still, you can't modify these buttons' borders).
    [blogger: zengun] [blogware contributor: wordpress]

  9. #9
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Michel V
    Not so in Gecko-based browsers, where the background is inside the checkbox or radio button (still, you can't modify these buttons' borders).
    As it is in Opera 7 BETA. But background-images are applied outside the "bound" (for lack of a better word--all the other are taken!) of the radio buttons and checkboxes. And borders go around the whole element's box (and CSS is box-based after all).

    Also, instead of using classes you can use attribute selectors like:
    Code:
    input[type=radio] { /* ... */ }
    input[type=text] { /* ... */ }
    input[type=checkbox] { /* ... */ }
    And the like. :-)

    ~~Ian


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
  •