CODEWITHSUNDEEP
htmlcss
Abhinav Parashar
Abhinav Parashar

Reputation: 649

Set default css of input type button

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;
}

Upvotes: 1

Views: 12259

Answers (4)

Vainglory07
Vainglory07

Reputation: 5293

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.

Upvotes: 0

Lakshmi Prasanna
Lakshmi Prasanna

Reputation: 97

You can do it like this...

button { background:none !important; }

Upvotes: 0

Veer Shrivastav
Veer Shrivastav

Reputation: 5496

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.

Upvotes: 3

LazerSharks
LazerSharks

Reputation: 3165

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

Example:

style1.css

    button
    {
         background:none !important;
    }

Or inline:

<button style="background: none;">

Upvotes: 0

Related Questions