Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: How do I prevent borders around my radio buttons/checkboxes?

Bottom of Page

1 to 3 of 3

  1.  
    • CommentAuthorimsam67
    • CommentTimeApr 18th 2009
     permalink
    Hi,

    I'm working in ASP.NET which renders a few .NET controls as INPUT tags i.e. button, text box, etc. In my CSS -- as posted below -- I want a thin border around my text boxes as well as my table itself but don't want the border around my Radio Buttons or Check Boxes. However, when I render my page, even radio selection buttons and checkboxes have the thin border around them. How do I prevent this?

    In my ASP.NET code, I simply assign the .EntryForm class to my table. This appears to be applying this style to all INPUT tags.

    Here's my CSS:
    .EntryForm { border:solid 2px #b7ddf2; background:#ebf4fb; padding: 20px; margin-left: auto; margin-right: auto; }
    .EntryForm h1 { font-size:18px; font-weight:bold; margin-bottom:8px; text-align: left; }
    .EntryForm p {font-size:11px; color:#777777; margin-bottom:20px; border-bottom:solid 1px #b7ddf2; padding-bottom:10px; text-align: left; }
    .EntryForm input { float:left; font-family: Trebuchet MS; color: #777777; font-size: small; padding:4px 2px; border:solid 1px #aacfe4; }
    .EntryForm textarea { float:left; font-family: Trebuchet MS; color: #777777; font-size: small; padding:4px 2px; border:solid 1px #aacfe4; }
    .FormLabel { font-family: Trebuchet MS; font-size:12px; font-weight: bold; color:#333333; font-variant: small-caps; float: right; padding-right: 5px; }
    .DDL { color: #676767; font-family: Trebuchet MS; font-size: small; border: solid 1px #aacfe4; }
    .button{ background-color:#EEEEEE; text-align:center; font: #FFFFFF 11px bold; }
  2.  permalink
    The easiest way might be to add a class to the radios and checkboxes. Like input type="radio" class="noborder", and then have the .noborder class set to border 0px none in CSS. You might have to declare that as .EntryForm input.noborder {border:0px none;}, or as .noborder {border:0px none !important;} to get it working, but give it a try and let me know how it worked out.
  3.  permalink
    For standards compliant browsers this should also work: .EntryForm input[type=radio] {border:0px none !important;}

1 to 3 of 3

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page