How to customize a set of controls with CSS


Tags: html,css

Problem :

I have this structure for fill out forms in html

    <fieldset class="signup">
        <div>
            <label>First Name:</label>
            <asp:TextBox ID="txtFirstName" runat="server"/>
        </div>
        <div>
            <label>Last Name:</label>
            <asp:TextBox ID="txtLastName" runat="server"/>
        </div>
    </fieldset>

And I defined this CSS

form fieldset 
{
    clear: both;
    border-width: 0px;
    border-style: none none none none;
    padding: 0px;
    margin: 0px;
}

form fieldset div 
{
    clear: left;
    display: block;
    margin: 10px 0px 10px 0px;
    padding: 0px;
    vertical-align: central;
}

form fieldset div label {
    display: block;
    float: left;
    /*width: 150px;*/
    padding: 1px 20px 0px 0px;
    text-align: left;
    vertical-align: central;
}

The appareance is clean but I commented the width attribute in the last style for labels in order to make it generic in the future. So I added a new style for my specific form and added this class to the fieldset but it's not working. I lost the width of my labels so how can I fix this mistake?

form fieldset div label .signup {
    width: 150px;
}


Solution :

This should work:

fieldset.signup div label  {
    width: 150px;
}

    CSS Howto..

    How to specify the system’s default serif and sans-serif font-family?

    How to remove default chrome style for select Input?

    How to properly center steps in bootstrap?

    How to prevent css borders from floating to the top of parent div

    How to get an li to expand to fit thumbnail content?

    How to show the scaled image and text in the view port without scrollbar?

    Can someone show me how to get my CSS code to work more than once? [closed]

    How to avoid universal Rule CSS Asterisk(*)?

    How to center in
    without text-align?

    How to add css in django Updateview or Create view form

    How to create Box Shadow rollover and hover css navigation?

    HTML/CSS: how to expand a table row i only one direction?

    How to prevent adding CSS 'class' properties

    How do I add a CSS class to an element from CSS (not jquery nor javascript)?

    How to make the 2nd column in a 2 column Bootstrap grid the same height as the 1st column

    How to make a CSS border for a dropdown menu?

    How to zoom content to screen width

    How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?

    How to disable CSS minifier in Liferay?

    How do I display a DIV if the current version of the program is greater than the version I have?

    How to avoid setting CSS class to one table among two tables?

    How to edit CSS style of a div using C# in .NET

    Weird CSS effect with box shadows - how to solve?

    how to resize background image of body in aspx page

    How do i cover the rail of an Ajax Slider Extender when i move the handle from step 0 to step 50 and have those steps colored gray?

    How to make “button-like appearance” with CSS

    Javascript slide showing the last image 5 times

    how to create inline style with :before and :after

    How to rotate image in relation to mouse position?

    CSS: how to set the width of form control so they all have the same width?