Form element display issues 2

[GiffordS]

I'm just not finding the answers for this one in the tutorials out there. I'm wanting to control the display of my form elements, specifically text input boxes on a given page. Here are my questions...

First, I am already using an external style sheet and would like to put this in there as well. The problem is that I have different styles on inputs on different pages, so if I go with a simple

input["text"] {background-color: #000000;}

then it will make all of my input elements comply on all pages, which I don't want. So question number one is can I use a separate identifier to say that input elements within a specified class or id use these rules? I've tried a few different combinations and none work. Also, what is the exact syntax for controlling the height of an input element? I can't seem to get that right either. Say I'm using 8px font in a given span, the input elements always dwarf the text around them.

Now, if I can't put different specifications in my external style sheet what would be the syntax for just doing this inline? Can I put it directly into the <input> tag? Actually I think I know the answer to that is no as I've been trying and it isn't working. So if I can, a syntax example would be great. Thanks.

 

[monksnake]

I don't understand why you don't just give all the text boxes you want a specific style the same class name.

the method to get all textboxes within CSS

input[type="text"]

does not work in IE6.

<.

 

[vacunita]

Can't you just assign classes to the form elements such as:

.myinputelement{
height:25px;
border: 1px solid red;
...
}

.mysubmitbutton{
height:50px;
border: 2px inset black;
...
}

then in your html document:

<input type=text class="myinputelement" name="myinputelement">
<input type=submit class="mysubmitbutton" name="submit" value="Click here to submit this form">

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[GiffordS]

thanks vac, that's what I was trying to do but could not get the syntax right in the css. Just to clarify, by setting the height I am setting the height of the element itself? I kept thinking that I need to set the height of the text element using a font-size but I'll give yours a shot.

 

[traingamer]

You can accomplish this a number of ways.
1) You could include additional css for the specific pages (making sure to place that css after the other css in the html page, which would then take precedence).

2) You could use inline styles for the exceptions

3) You could write specific css utilizing ids and or classes. See Sitepoint Style Web Forms Using CSS (among other places) for more details.

If you have a lot of changes on a lot of pages I'd probably use the first method. If you have only a few exceptions on a few pages, I'd probably use the 3rd one.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[traingamer]

And, of course, while I'm typing ever so slowly, you get more answers.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[monksnake]

<.

 

[vacunita]

height is for the element itself. font-size changes the text size inside the element. Usually the element will the grow to accommodate the text in it.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[GiffordS]

if I place the element within a span that already sets the font-size do I need to then restate that font size in the css for the element?

 

[vacunita]

That's a good question.

Someone please correct me if I'm wrong, but I think Form elements don't inherit CSS declarations from there parents.

which means you'll need to restate the declarations for the form element.


----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Vragabond]

AFAIK, they do not inherit. They are the only elements that don't, because they are rendered OS specific.

Returning to the original issue, I would look into descendant selectors, which were already mentioned in the link in point #3 of traingamer's post, but maybe they weren't prominent enough.

Say you have multiple elements that you want to apply different styling to. When? When they are in a certain place on page? In a certain box? In a header or footer or a menu? You just want an element to appear differently on the main page than all the other pages? These are important questions that will answer you where you need to name the parent. Say it is page. You want input red on the entry page and blue on others. You would apply id="home" (or similar) to the body element of the entry page and then use CSS descendant selector to say how an input should look if it is under an element with an id of home.

#home input { background: red; }

You would do the same if it is the part of the page, say #header, #footer, #sidebar, or something else. Just remember that when you plan on having many elements with the same style, say a box on the side, you need to use class instead of id. And you would end up with .sidebox input {}.

Hope that helps you get on the right track.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]