CODEWITHSUNDEEP
css
user385729
user385729

Reputation: 1984

How to force a button inside a div not to inherit the parent CSS?

I have a div in which which there is a form and a submit button; I ahve given the form the following CSS:

background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fff), color-stop(90%, #f2f2f2));

this background is applied to my button CSS which a bootstrap button; how can I force it not to inherit from the parent?

ADDED:

JSFIDDLE: http://jsfiddle.net/web_developer_888/fGY3Q/1/

The whole CSS:

width: 40%;
height: 40%;
margin-right: auto;
margin-left: auto;
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fff), color-stop(90%, #f2f2f2));

box-shadow: 10px 10px 5px #888888;border: 2px solid #d6d6d6;

Thanks

Upvotes: 0

Views: 2247

Answers (3)

Code Maverick
Code Maverick

Reputation: 20415

The problem was due to the fact that you have 2 controls with the same id of upload. Your wrapping div and your submit button.

To fix it, simply remove the id and name attributes from the submit button. You also had invalid br tags. I fixed those too.

See working jsFiddle demo

I'll leave you to clean up the markup and css to make the box and its controls line up and look all pretty. =D

HTML

<div id="upload">
    <form action='http://test' method='post' accept-charset='utf-8' class='form-horizontal' enctype='multipart/form-data' style='text-align:center;'>
        <br />
        <div class='control-group'>
            <input type='file' name='userfile' value='' id='userfile' class='btn btn-primary' required='true' style=' width:290px;' />
            <br />
            <br />
            <label for='name'>Name</label>
            <input type='text' name='associateName' value='' id='name' required='required' placeholder='Name' />
        </div>
        <div class='control-group'>
            <label for='dept'>Department Name</label>
            <input type='text' name='dept' value='' id='dept' required='required' placeholder='Department Name' />
            <br />
            <input id='startDateUpload' name='startDateUpload' value='" + $.datepicker.formatDate(dateFormat, startDate, inst.settings) + "' type='hidden' />
            <input id='endDateUpload' name='endDateUpload' value='" + $.datepicker.formatDate(dateFormat, endDate, inst.settings) + "' type='hidden' />
            <input id='seg' name='seg' value='0' type='hidden' />
            <input id='total' name='total' type='hidden' />
        </div>
        <input type='submit' value='Upload' class='con btn btn-primary' />
    </form>
</div>

CSS

#upload 
{
    width: 40%;
    height: 40%;
    margin-right: auto;
    margin-left: auto;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fff), color-stop(90%, #f2f2f2));
    box-shadow: 10px 10px 5px #888888;
    border: 2px solid #d6d6d6;
}

Upvotes: 1

Uriel Robles
Uriel Robles

Reputation: 61

Here is your code working in JsFiddle:

http://jsfiddle.net/sHxDq/

It appears the background is not being inherited to the button, could you post some of your html markup?

Alternatively, you could make sure there is no background rule being applied to the button with something like this:

I would add some rule like this:

.button{
   background: none !important;
}

Upvotes: 0

Charles Ingalls
Charles Ingalls

Reputation: 4561

Either you just apply it to certain input types only, e.g. like this:

input[type="text"], input[type="email"], textarea {
   background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fff), color-stop(90%, #f2f2f2));
}

Or if you apply it to all of them, you can remove it from the button input type by declaring this afterwards.

input[type="submit"] {
   background: none;
}

Upvotes: 0

Related Questions