Topic: Reset Style for Submit Form Button

I have a form and I've set all input elements to 2px border with a canary yellow background color:

#CONTACT_US input {
width: 250px;
border: outset 2px #ffffff;
background-color: #ffffcc;
}

I also have a submit button, but I do not want it to take on the above attributes, I would like it to have NO STYLE, and to revert to the normal display for this element. Is this possible?

If not, what CSS style best resembles the original look and feel of a submit button, I'm not even close with my effort of:

#SUBMIT_BUTTON {
border: outset 4px #000000;
background-color: #cecece;
}


For clarification my HTML looks something like this:

<div id="CONTACT_US">
<form>
<input type="text" name="first_name"/><br/>
<input type="submit" id="SUBMIT_BUTTON"/>
</form>
</div>

try this-


<form>
<div id="CONTACT_US">
<input type="text" name="first_name"/><br/>
</div>
<input type="submit" name="submit" />
</form>

(Edited by norm on 08-12-2004 01:35)

Or just set a class for the inputs you would like to style, and assign the class accordingly...

norm: That DIV has to include the submit button; other properties are set with it, including background-color width and height for the area.

DL-44: I understand your solution but was trying to come up with a solution. I'm curious to know if it is possible to do what I am trying to do.

Does anyone know if this is possible, to reset (override) the properties of an html element after the element has previously received some form of style?

Karl

AFAIK - no.

That's the whole purpose of classes and id's, and nesting selectors. I don't understand why you would want to come up with some way to accomplsih something when some way to accomplish it already exists...

You're already assinging an id to the submit button. It'd be a simple matter to remove that and instead add a class to the text inputs.

As far as styling it to look like it's not styled - you can't do that effectively because there are attributes that are not available to CSS that are used by default, and with different computer setups come different button styles.

Now, technically, you can set the styles for various types of input elements (i.e. submit, reset, text, etc..), but support is sketchy at best.

(Edited by DL-44 on 08-12-2004 20:04)

If I were you I'd look at using the <button> element instead of the input element.
Or, you could put your inputs and your buttons in seperate fieldsets.
Or you could use an attribute selector in your css.

#CONTACT_US input[type=text]

{

width: 250px;

border: outset 2px #ffffff;

background-color: #ffffcc;

}

It's not totally cross-browser (fails in IE, successful in Opera 4.0+, successful in [most?] Gecko browsers), but it works and is W3C standard for CSS 2.0.

DL-44: Thanks for the "AFAIK - no", just needed to hear someone say that.
Okay, I will go back and assign class to each input text area and none to the submit button.
Here's my whine: I like the universal method of assigning style to input boxes with the input class in CSS but HATE that this also effect the submit button.

Err.. does the <button/> tag actually trigger the form's submission or do you have to include a bit of JavaScript?

Karl

The buttons have type attributes, just like inputs.
If you set type='submit', then it submits, just like inputs.
If you set type='reset', then it resets, just like inputs.
If you set type='button', then you can attach to it any sort of js you'd like.

w3schools/button

http://www.w3.org/TR/html401/interact/forms.html#h-17.5

quote:

---

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

---

Sweet. Did not know that.

Back to the input styles - they do have it set up to allow you to specify the type of input in your CSS. Unfortunately, IE does not support it.

Well then... I shall try the button!