选择没有发生的框样式

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