SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Toronto, Ontario
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Outline on Radio Button?

    Hey guys,

    Is there anyway to get rid of the ugly dotted outline on radio buttons?

    I've tried outline:none but that didn't seem to work when I applied the class to the button.

    Thanks,
    Mario
    $ Available For Hire
    Need a website designed or coded? Then feel free to contact me!

    PSP Backgrounds - PSPBG.net || Photoshop Brushes - PSBrushes.net

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Edit: see my follow-up post.

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I believe I'm incorrect -- you may be able to remove an outline by doing the following:

    .myclass:focus {
    outline: none;
    }

    The :focus part is important, calling the class into action when the element takes stage. You learn something new every day!

  4. #4
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Toronto, Ontario
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thank you for the reply.

    I tried it out in firefox but had no luck.

    http://djbenballer.com/basic_feedback_form/

    Added the style right to the radio button.

    Code:
    <input name="" type="radio" value="" class="myclass" />
    Any other ideas?
    $ Available For Hire
    Need a website designed or coded? Then feel free to contact me!

    PSP Backgrounds - PSPBG.net || Photoshop Brushes - PSBrushes.net

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,289
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Any other ideas?
    Yes leave the poor thing alone

    You shouldn't remove features such a outline which are important for accessibility as keyboard users will have no way to navigate your page. Also form controls are almost impossible to style in a cross browser way so most times its a fruitless pursuit anyway.

    People are used to how forms and their controls work on the browsers they use and in many cases it is far better to leave them alone.

    The dotted line on the radio button in Firefox doesn't seem to be an outline anyway but rather some browser enhancement to the form element.

  6. #6
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Toronto, Ontario
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Paul, now that you put it that way, I love the outline haha. Kidding but you got a very good point there so I will leave the outlines as they are.

    It's just being a designer as well as a perfectionist these little things get to us, but I guess we just have to let some things slide.

    Thanks,
    Mario
    $ Available For Hire
    Need a website designed or coded? Then feel free to contact me!

    PSP Backgrounds - PSPBG.net || Photoshop Brushes - PSBrushes.net

  7. #7
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The day the web is more like print, then maybe we'll have the control we all desire. But I don't think that day will arrive. :-)


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
  •