Using CSS sub types with ASP.Net controls (CSS attribute selectors)

Question

I'm trying to change some of my ASP.Net pages to use s and replace some s.

I had some trouble aligning the labels and text boxes and then I found this awesome JSFiddle: http://jsfiddle.net/p54SE/

I had no idea that CSS could be used to give specific instructions to a Label and an input[type=text] separately. I have referred to these as subtypes of CSS, but if you know the correct terminology please inform me.

How would I be able to recreate this with:

<div class='label-wrapper'>
  <asp:Label runat="server" ID="lbl_Title" Text="Title" />
  <asp:TextBox runat="server" ID="tb_Title"  />
</div>

I was so certain just changing the name would work, but no luck.

div.label-wrapper > asp:Label {

CSS attribute selectors.

Babak Naffas
– Babak Naffas

2014-02-24 17:28:44 +00:00
Commented Feb 24, 2014 at 17:28 — Babak Naffas
– Babak Naffas, Commented Feb 24, 2014 at 17:28

Babak Naffas · Accepted Answer · 2014-02-24 21:35:32Z

2

The CSS selector you need is div.label-wrapper > span

You are confusing your server side controls and client side HTML. The server side control <asp:Label /> renders as a <span> element. When applying CSS rules, make sure you look at the HTML that is rendered by your ASP.NET application.

Option 2

You can also add a CssClass attribute to your server side control and reference said class directly.

<asp:Label runat="server" Text="My Label Text" CssClass="label-text" />

and use the CSS selector

.label-text{
  //your rules here
}

edited Feb 24, 2014 at 21:35

answered Feb 24, 2014 at 17:31

Babak Naffas

12.6k3 gold badges36 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arbel · Accepted Answer · 2014-02-24 17:36:19Z

1

asp:Label control produces span by default, so use this to target the produced element:

div.label-wrapper > span {
    // your styles here
}

Furthermore, you can assign a class to the the control to specifically target it:

<asp:Label CssClass="yourClass" runat="server" ID="lbl_Title" Text="Title" />

CSS:

.yourClass {
    //your styles here
}

edited Feb 24, 2014 at 17:36

answered Feb 24, 2014 at 17:30

Arbel

31.1k2 gold badges31 silver badges31 bronze badges

2 Comments

StuckOnSimpleThings Over a year ago

Span works and the TextBox was correct all along. I was just assuming it was broken because the label wasn't working. Thanks this will help me to align everything.

Arbel Over a year ago

@StuckOnSimpleThings You are welcome! Glad to be of help to you.

dlane · Accepted Answer · 2014-02-24 17:37:26Z

1

In .Net, the <asp:Label> will be turned into <span> when the server actually parses the HTML. The <asp:Label> is part of .Net that automagically inserts the necessary markup for that element. That said, to target that <span>, change your CSS selector to .label-wrapper > span and that should work better for you.

edited Feb 24, 2014 at 17:37

answered Feb 24, 2014 at 17:29

dlane

1,1317 silver badges7 bronze badges

1 Comment

Babak Naffas Over a year ago

<asp:Label> renders as a <span>, not a <label>.

Collectives™ on Stack Overflow

Using CSS sub types with ASP.Net controls (CSS attribute selectors)

3 Answers 3

Option 2

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Option 2

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related