SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Impossible to style form inputs

    Hello everyone,

    I am having tremendous difficulty in styling form inputs, specifically checkboxes. Next to each checkbox is a word - how do I style it? Can I change the text-color, font-size or add a border around the checkboxes?

    For example, here I'm trying to give the text 'banana' a yellow color :

    PHP Code:
    <input type="checkbox" style="color:yellow" name="fruits[]" value="banana">banana 

    Thank you in advance.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi RedBishop,

    Use a label tag: https://developer.mozilla.org/en-US/.../Element/label
    Not only will you be able to style the text contained within it, but it has accessibility benefits, too.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Pullo,

    its all working now.

    I was rather surprised to get a reply from you in the CSS forum! Then again, this was the first time I posted in this particular forum.

    Anyway, thanks again.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RedBishop View Post

    I was rather surprised to get a reply from you in the CSS forum! .
    That Pullo gets everywhere

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That Pullo gets everywhere
    Yeah, like a bad smell super hero.


    Glad you got the form working RedBishop.
    Label tags are great, as they allow you to associate text or other elements with a particular input element. So in your case, clicking on the text "banana" would activate the associated checkbox.
    That's especially for those users who might have trouble operating a mouse with enough precision to select the check box itself.

  6. #6
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That Pullo gets everywhere
    Yes, he sure does.

    So in your case, clicking on the text "banana" would activate the associated checkbox.
    Very useful indeed, thanks.


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
  •