Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Selectively Applying CSS

    I'm trying to apply CSS to labels I have on my page. I would like the CSS to affect only the actual control labels that I put on the page and not labels that are rendered from controls like radio button lists. Is there a way I can do that without having to add a class to each label that I want to affect on my page?

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    920
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Declare your standard labels as:

    Code:
    label {//standard declarations;}
    You can then target the specific labels in the form to be one thing by declaring something like:

    Code:
    form > fieldset > label {these styles will only affect label tags which are inside a form and a fieldset;}
    Check out this simple example to see it in action:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>HTML Template</title>
    <style type="text/css">
    
    label {color: blue;}
    form > label {color: red;}
    
    </style>
    
    </head>
    
    <body>
    
    <label>Global Label</label>
    
    <form>
         <label>Form Label</label>
    </form>
    
    </body>
    </html>
    P.S - I'm not sure if you are meant to use <label> tags outside of a form, maybe someone can clear that up??

    Regards,

    LC.
    Last edited by LearningCoder; 11-29-2012 at 02:08 PM.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    What do you mean by “labels that are rendered from controls like radio button lists”? Show your code, we aren’t psychic.

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry...since I had been thinking about it, it made perfect sense to me
    I'm applying a width to my labels on a form. If the radiobutton list labels get the width applied, they get messed up.

    CSS to make the labels a certain width
    label { width: 100px; }

    I'd like this label like this to be styled with the label selector...no problem
    <label>Late Submission</label>

    This ASP.Net radio button list:

    Code:
    <asp:RadioButtonList ID="rblLateSubmission" RepeatDirection="Horizontal" RepeatLayout="Flow" runat="server">
    	<asp:ListItem Text="Yes" Value="Yes" />
    	<asp:ListItem Text="No" Value="No" Selected="True" />
    </asp:RadioButtonList>
    Renders as a span with labels in it that I do not want to have the width applied
    (I changed the IDs so they were not so long)

    Code:
    <span id="someId">
    	<input id="someId0" type="radio" name="someName" value="Yes" />
    	<label for="someId0">Yes</label><input id="someId_1" type="radio" name="someName1" value="No" checked="checked" />
    	<label for="someId1">No</label>
    </span>
    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •