Question

我有一个div，其中有一个表单和一个提交按钮;我给出了以下CSS的形式：

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

这个背景应用于我的按钮CSS，它是一个自举按钮;我如何强迫它不要继承父母？

增加：

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

整个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;

谢谢

Answer 1

问题是由于您有两个具有相同ID上传的控件。您的包裹div和submit按钮。

要解决此问题，只需从提交按钮中删除id和name属性即可。您还有无效的br标记。我也修了那些。

See working jsFiddle demo

我会让你清理标记和css，让盒子和它的控件对齐，看起来很漂亮。 = 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;
}

Answer 2

您只需将其应用于某些输入类型，例如像这样：

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

或者如果您将它应用于所有这些，您可以通过以后声明这一点将其从按钮输入类型中删除。

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

Answer 3

以下是您在JsFiddle中运行的代码：

http://jsfiddle.net/sHxDq/

看起来背景没有被继承到按钮，你可以发布一些你的HTML标记吗？

或者，您可以确保没有将背景规则应用于按钮，如下所示：

我会添加一些这样的规则：

.button{
   background: none !important;
}

如何强制div内的按钮不继承父CSS？

3 个答案:

HTML

CSS