Set default css of input type button

Question

I am applying a background image on input type button. for this i have written my code in style.css. But now i want that button will look like as it is default, but my restriction is that i can not delete css style from style.css. But i can override it in other css style1.css. so how can i override this?

style.css

button
{
background:red;
}

if i override like this it shows nothing.

style1.css

button
{
background:none;
}

http://stackoverflow.com/questions/381100/reverting-css-style-of-input-type-submit-button-to-its-default-style — Hanky Panky, Nov 22 '13 at 04:35

score 3 · Answer 1 · edited May 23 '17 at 11:53

Probably a duplicate question for Can you style html form buttons with css?.

Well, as far as button or any other input type is considered you can do that by adding this:

HTML

<input type="submit" name="submit" value="Submit Application" id="submit" />

CSS

#submit {
    background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:6px;
    color: #fff;
    font-family: 'Oswald';
    font-size: 20px;
    text-decoration: none;
    cursor: poiner;
     border:none;
}



#submit:hover {
    border: none;
    background:red;
    box-shadow: 0px 0px 1px #777;

}

You can even try this,

input[type="submit"]{
  background: #fff;
  border: 1px solid #000;
  text-shadow: 1px 1px 1px #000;
}

or even, you can add a class:

.my_button_type
 {
  background: #fff;
  border: 1px solid #000;
  text-shadow: 1px 1px 1px #000;
}

You can apply inline styling also:

<input type="button" style="background: #333; border: 0px;" />

So, you have many ways to do it.

score 0 · Answer 2 · answered Nov 22 '13 at 04:32

0

You can either use inline styles, or use !important.

Example:

style1.css

    button
    {
         background:none !important;
    }

Or inline:

<button style="background: none;">

answered Nov 22 '13 at 04:32

LazerSharks

3,089
4
42
67

Please do not use `!important` in CSS, it's very bad practice. – Tomek Buszewski Dec 14 '15 at 14:13

Lakshmi Prasanna · Answer 3 · 2013-11-22T04:39:54.743

0

You can do it like this...

button { background:none !important; }

edited Nov 22 '13 at 04:39

answered Nov 22 '13 at 04:32

Lakshmi Prasanna

97
1
7

I have to set default look of button(Looks like Windows-made), doing like yours will not work:( – Abhinav Parashar Nov 22 '13 at 04:35

score 0 · Answer 4 · answered Nov 22 '13 at 04:55

First, precedence is important:

 <link rel="stylesheet" href="style.css" />
 <link rel="stylesheet" href="style1.css" />

You must put the css file after the original css that you want to overwrite.

Second, in your style1.css, there are so many approach do achieve what you want. Like cancelling out the css style that you want to overwrite

//style.css
button {
    background: url("...");
}

//style1.css
button {
    background: none;
}

or using !important to attributes you want to implement.

Set default css of input type button

4 Answers4