2

I have this code, and it renders this HTML. How can I apply CSS to my control if they are named ctrctrctr-00000 or something else like that that is only useful to the VIEWSTATE?

<!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>

</title><link href="../global.css" rel="stylesheet" type="text/css" />
Informacion General: Paises
</head>
<body>
    <form name="aspnetForm" method="post" action="Pais.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUyMDk1NTY2MGRkwAKu2OIV85kXfcUcAefBBNmSuRY=" />
</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLSha7NBAKqw7ARAvjQlaIKhJ2HMftmmOoxe/+aE4sG3D32QtA=" />
</div>
    <div>

    <input name="ctl00$ContentPlaceHolder1$txtPais" type="text" id="ctl00_ContentPlaceHolder1_txtPais" />
    <input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Button" id="ctl00_ContentPlaceHolder1_btnSubmit" />

    </div>
    </form>
</body>
</html>



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Frontend._Default" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>    
        <h1>Prueba de Escritorio</h1>        
        <asp:TextBox ID="txtPais" runat="server"></asp:TextBox>
        <asp:Button ID="btnSubmit" runat="server" Text="Guardar" onclick="btnSubmit_Click" />    
    </div>
    </form>
</body>
</html>

How can I use a CSS selector to target ALL textboxes on the page regardless of name?

Thank you.

Improve this question

4 Answers 4

Reset to default
3

Why wouldn't you do this either:

input[type=text] { /* style */ } (standard)

or

input.text { /* style */ } (not as standard)

???

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

2 Comments

That would effect all text boxes on any page the stylesheet is linked to. If that is what he wants then there is nothing wrong with that.
even if you do not want this to be applied to all textboxes in all pages, just apply a class or ID to the parent div and use hierarchy to specify selective text boxes eg: .specefic-area input[type=text] { /* style */ }
2

You can give it a CSS class, like this:

<asp:TextBox ID="txtPais" runat="server" CssClass="textbox" />

Then just use add what you need in your CSS:

.textbox { color: red; }

The CssClass property doesn't get mangled like the ID and name attributes.

Improve this answer

4 Comments

Thanks! Much clearer answer. However it's not working as expected. I set the CssClass attribute, created the CSS rule; during testing while viewing source I can see that the CSS file is being correctly linked, but no change. I also notice the normal HTML code for the textbox doesn't have a reference to my css class at all. What would cause this?
@Sergio - Is the CssClass getting changed anywhere else? The HTML for my example above should render class="textbox" as a property on the <input>.
OK, I added ANOTHER textbox to see if the testing server isn't relaying new information and that's the case. It's not showing the newest additions. How can I make sure that the testing server shows me the latest stuff? I mean the ASP.Net Development server.
@Sergio - that happens sometimes, either a server restart or a re-compile usually forces it to re-cache, if that doesn't work blow away the temporary files under your Microsot.Net\Framework folder (in the rare case it really won't let go).
1

you can use jQuery and do it like this:

$('input[id$=_txt]').addClass('yourClassName maybeAnotherClassName');
Improve this answer

5 Comments

What does $('input[id$=_txt]') do?
@Sergio - This answer would require jQuery...and is definitely not the correct way to go about this :)
It matches an input fields that contain '_txt' in their id
You would use this for something like if you wanted to change the class of the textbox onclick using javascript. I wasn't thinking so simply as Nick down below :)
It selects all IDs that end in _txt, *= would be contains.
0 
$(document).ready(function () {
            $("input[type=text]").addClass("textBoxCSS");
        }

For applying classes to text boxes on a page, you can further customize the selectors and be more specific.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.