Topic: Reset Style for Submit Form Button Pages that link to <a href="https://ozoneasylum.com/backlink?for=22895" title="Pages that link to Topic: Reset  Style for Submit Form Button" rel="nofollow" >Topic: Reset  Style for Submit Form Button\

 
Author Thread
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 08-11-2004 21:46 Edit Quote

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>

norm
Paranoid (IV) Inmate

From: [s]underwater[/s] under-snow in Juneau
Insane since: Sep 2002

IP logged posted posted 08-12-2004 01:33 Edit Quote

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)

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 08-12-2004 02:17 Edit Quote

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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 08-12-2004 18:25 Edit Quote

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 08-12-2004 20:03 Edit Quote

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)

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 08-12-2004 21:48 Edit Quote

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.

code:
#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.

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 08-13-2004 16:27 Edit Quote

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

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 08-13-2004 18:28 Edit Quote

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 08-13-2004 18:30 Edit Quote

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.

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 08-13-2004 20:03 Edit Quote

Well then... I shall try the button!



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu