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


Tags: css

Problem :

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



Solution :

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

    CSS Howto..

    sunken border when background-color css specified - how to avoid?

    How to make triangle section separator [closed]

    How do I get my body to the bottom of my page OR further if necessary?

    How to show image based on sort type in GridView

    how do responsive recaptcha images

    How to use different CSS in the same page

    How to make a pie chart in CSS

    How to assign data attribute in css?

    How to show list items in menu when hover on the parent's it via CSS? [closed]

    CSS Newbie - How to dynamically move buttons

    how to apply css transition to background image

    How to dynamically change the style of a comma separated tags with html/css/jquery

    How to use jQuery to check if element breaks to the next line?

    CSS/JS: How do I copy the edge pixels and repeat them

    How to display “a” to full of the line

    How is CSS/HTML Rendered In Browsers?

    How to create an interactive image with HTML5, Javascript, DOM and CSS

    How do you make these div elements display correctly?

    How To Use CSS To Add Multiple Fonts In One Paragraph And How To Add Multiple CSS Properties To One CSS Id?

    How to set the horizontal menu to be center without setting the specific width

    Linkedin Follow Button not showing properly in Firefox

    How to position an element at the TOP LEFT corner of a page using CSS?

    how to make a custom scroll bar with css

    how to get these two div's side by side in this container

    How do you make a sticky nav bar change colour when you scroll to a desired div?

    moodle: how to change the column size in bootstrap theme 'clean'?

    How do I scale an SVG background-image without honoring aspect ratio in Firefox?

    how to easily develop print css?

    How to wrap text in css

    how to fadein an inline element as a block element