Solved

CSS style to make form button look like normal

Posted on 2009-05-05
3
793 Views
Last Modified: 2012-08-13
I'm supplying the code for a simple form for another department to add to one of their web pages.
The problem is, they've code some mass-complicated css going on and it's making the buttons look like black text on an orange background (which is how they've set it up for other forms on their website with a "INPUT[type=button]" definition)  I want my button to look "normal"  So I can override their style sheet with some inline css
like this:
<input type="button" name="one" value="1" style="xxxxxxx" />

Problem is, I can't figure out how to 'style' a button to look like the defaults of a form button without using images.
Can anyone help, even getting me close would be great.

Thanks!
0
Comment
Question by:dban00b
3 Comments
 
LVL 1

Accepted Solution

by:
salamay earned 250 total points
ID: 24308843
Hi,

Try This

.specialbutton
{ border: font-size: 11px; color: #FFFFFF; font-weight: normal; font-family: arial; background-color: #CC0000; text-decoration: none;
}

<input type="submit" value="Submit form" class="specialbutton">

Hope it works
Salamay
0
 
LVL 3

Assisted Solution

by:mharfouch
mharfouch earned 250 total points
ID: 24310028
You should use an ID, not a class.

You just need to insert this where you want the button in the code:

<input type="submit" value="submit" id="button">

and this somewhere in the css:

#button {
      font-size:10px; background-color:#CCC;
}

And there you go. A little "normal" button.
0
 
LVL 1

Author Comment

by:dban00b
ID: 24315609
Neither of those look quite like the default button, but at least it gets me away from the hideous 'messed' up button they put on their entire site.
Thanks.
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Are there any non javascript based chart/graph solutions? 14 31
Testing Responsiveness for Different Devices 4 28
Python - desktop use 1 32
Can't get container centered 4 13
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

773 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