Solved

How do I create a global CSS statement for all input fields on all my .aspx pages

Posted on 2010-09-17
5
333 Views
Last Modified: 2012-05-10
Is there a way to define a global style that will cover all the input elements throughout my site? I don't want to have to assign the style to each element (ie cssClass=).

Something like: BODY {font-family: serif; background-color: silver;}  only to cover asp:textbox, asp:dropdownlist, etc.

tried INPUT.TEXT{ }.... this doesn't work

Thanks
0
Comment
Question by:Bob Hoffman
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 9

Expert Comment

by:TonyReba
ID: 33705905
if you dont want to use a class,

input[type=button], input[type=submit]
{
width:auto;
padding:3px 6px;
color:#ffffff;
text-align:center;
background:#e2212a;
font-size:11px;
font-weight:bold;
border:0px;
margin:2px;
cursor:pointer;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

}

Open in new window

0
 
LVL 41

Expert Comment

by:guru_sami
ID: 33705909
0
 
LVL 9

Accepted Solution

by:
TonyReba earned 500 total points
ID: 33705920
this goes in your head secition
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>-z-</title>
<style type="text/css">
input, textarea {
border: 2px solid #d69;
background: #999;
float: left;
clear: left;
width: 250px;
margin: 10px 0;
padding: 6px;
font: 1.2em monospace;
color: #fc3;
letter-spacing: .07em;
}
</style>
</head>

Open in new window

0
 
LVL 1

Expert Comment

by:Hafeez Ansari
ID: 33708630
You can do it in 2 different ways, first method is to write css codes direct for input elements e.g.

input[type=text]
{
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding:4px;
font:12px;
}
in the above mentioned codes you are writing codes to apply directly on input type. and wherever you'll use in html <input type="text"............. /> these codes will automatically apply to all inputs.
But you can do the same thing in another way, first write a style class and then apply to the concerning elements e.g.
.textEntry
{
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding:4px;
font:12px;
}
now you have a class named 'textEntry' in your css and you can apply this class to the elements for example:
<input class="textEntry" type="text size="25" value="" />

hope this will be helpful to you.
0
 
LVL 8

Author Closing Comment

by:Bob Hoffman
ID: 33711550
This did the trick... added "select" to handle the dropdown lists.

input, textarea, select {}

Thanks everyone.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question