Bootply

Question

我目前正在开发一个包含复杂CSS文件的网站。我添加了一个新功能，但由于其他样式影响它，我似乎无法编辑我所拥有的输入选项卡。基本上我试图超越一定的财产。

CSS

textarea, input[type="number"]{
    background-color: #ffffff;
    border: 0 solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.035) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}


select, input[type="number"] {
    border-radius: 2px 2px 2px 2px;
    color: #555555;
    display: inline-block;
    height: 37px;
    font-size: 14px;
    line-height: 15px;
    margin-bottom: 0px;
    padding: 2px 6px;
    vertical-align: middle;
}

select, textarea, input[type="number"]
    color: #626c72;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 4px 6px;
    vertical-align: middle;
    box-shadow: 1px 1px 8px rgba(0,0,0,0.05);
    width: 100%;
}

.target {
    border: 0;
}

HTML

<div class="container">
    <div class="row">
        <div class="form-group col-sm-6">
            <label for="Label1">Label1:</label>
                <input class="form-control target"  step="any" type="number" min="0" max="24"></input> 
        </div>  
    </div>
</div>

我要做的是从第一个选择器覆盖border: 0 solid #CCCCCC;并使其看起来像.target输入的默认引导输入。我不希望它影响我的应用程序中的所有其他输入。我只希望它影响你上面看到的html。我认为我的最后一个样式.target选择器可以做到这一点，但事实并非如此。我的jsFiddle是here。我想要输入的默认引导边框/轮廓。你现在可以告诉它不存在。

Answer 1

如果您不希望将自定义CSS应用于该特定输入，则可以使用CSS :not selector：

tableView

Bootply

Answer 2

您也可以使用：

 input.target {
    border: 0;
 }

或

 input[type="number"].target {
    border: 0;
 }

使用Bootstrap添加边框以输入

2 个答案:

Bootply