Question

我创建了一个选择/选项框，我的样式没有发生。我已多次上传相同的文件，所以不是这样。我创造了一个小提琴，看看它是否会起作用。但是，当我添加更多我的css代码时，它会回到未经样式的版本。我没有看到我做错的代码超过这个，以便它打破。有人看到我忽略的东西吗？

https://jsfiddle.net/ybd0bLr1/1/

.selectbar是我选择的酒吧样式来自的类。

.inputbarphone[type=tel] {
    display: block;
    width: 400px;
    margin: 10px auto;
    font-size: 18px;
    padding: 10px;
    -webkit-transition: all 0.40s ease-in-out;
    -moz-transition: all 0.40s ease-in-out;
    -ms-transition: all 0.40s ease-in-out;
    -o-transition: all 0.40s ease-in-out;
    outline: none;
    border: 1px solid #DDDDDD;
}
.inputbarphone:hover {
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    box-shadow: 0 0 10px #ccc;
}
.inputbarphone[type=tel]:focus {
    border: 1px solid #3385FF;
    -moz-box-shadow: 0 0 1px 1px rgba(51,133,255, 1);
    -webkit-box-shadow: 0 0 1px 1px rgba((51,133,255, 1);
    box-shadow: 0 0 1px 1px rgba(51,133,255, 1);
}
.selectbar {
    display: block;
    width: 400px;
    margin: 10px auto;
    font-size: 18px;
    padding: 10px;
    -webkit-transition: all 0.40s ease-in-out;
    -moz-transition: all 0.40s ease-in-out;
    -ms-transition: all 0.40s ease-in-out;
    -o-transition: all 0.40s ease-in-out;
    outline: none;
    border: 1px solid #DDDDDD;
}

Answer 1

这一行你有一个额外的括号：

.inputbarphone[type=tel]:focus {
    border: 1px solid #3385FF;
    -moz-box-shadow: 0 0 1px 1px rgba(51,133,255, 1);
    -webkit-box-shadow: 0 0 1px 1px rgba((51,133,255, 1); <-----
    box-shadow: 0 0 1px 1px rgba(51,133,255, 1);
}

小提琴：https://jsfiddle.net/ybd0bLr1/2/

正如@Quentin所说，只需这样做：

.inputbarphone[type=tel]:focus {
    border: 1px solid #3385FF;
    box-shadow: 0 0 1px 1px rgba(51,133,255, 1);
}

选择没有发生的框样式

1 个答案: