How to select label for=“email” in CSS?


Tags: css

Problem :

Code:

<label for="email">{t _your_email}:</label>

CSS:

label
{
    display: block;
    width: 156px;
    cursor: pointer;
    padding-right: 6px;
    padding-bottom: 1px;
}

I want to make a new CSS for the email label as it's not meant to be that wide.



Solution :

The selector would be

label[for=email]
{
    /* ...definitions here... */
}

It's an attribute selector. Note that some browsers (versions of IE < 8, for instance) may not support attribute selectors, but more recent ones do. To support older browsers like IE6 and IE7, you'd have to use a class (well, or some other structural way), sadly.

(I'm assuming that the template {t _your_email} will fill in a field with id="email". If not, use a class instead.)

Note that if the value of the attribute you're selecting doesn't fit the rules for a CSS identifier (for instance, if it has spaces or brackets in it, or starts with a digit, etc.), you need quotes around the value:

label[for="field[]"]
{
    /* ...definitions here... */
}

They can be single or double quotes.


    CSS Howto..

    How to get ratio of scale image, when it's autoscaled by background-cover?

    How to apply IE11 specific css [closed]

    How to resize the width of div left to another which has float:left;?

    How do I position a div under a fixed position div

    How to get all images(overlapping allowed) in one line using css?

    How can I have my cards stack on top of one another?

    CSS Flexbox: How do you align child elements of a flexbox container to opposite far ends of the main axis?

    How to fix text with limited height and absolute position overflows

    CSS display: table - How can I line up two cells to be in the center of another DIV using display: table?

    My div box isn't showing up, what am I doing wrong? [closed]

    How to apply css and elemental styles to a ASP.net MVC 3 Web Application

    How to apply an active state to a CSS sprite?

    How to create 2 separate SVG without blocking other div elements?

    how to make 2 fixed-width sidebar div and 1 flexible-width main div?

    How to create diagonal boxes using css?

    How to give shadow to a border

    How do i make part of a CSS background fit perfectly to a browser

    How to change color of text based on the php condition [closed]

    How to get CSS pulsating effect to work in FireFox and Internet Explorer?

    CSS Padding is working WITH :after selector - how to make it work on main element independently

    How to make rotating shape look thick?

    How to convert list of buttons to radio buttons based on row overflow?

    How to get this div into the right position

    How to change the background colour of a QWidget inside QStackedWidget using css?

    How to change an image on mouseover of wrapper div

    how to style simple_form with material design or custom css

    How to reverse the text with js/css? [duplicate]

    How to avoid text selection in web page using css?

    How to call multiple classes of CSS in a single class?

    Using CSS approach how to set an image to fill a path in SVG?