英文:
Select2 border color if select component is required
问题
我正在为输入字段添加边框颜色，但无法将其应用于select2组件。
以下是您的CSS代码部分，已翻译：
input:required.form-control:focus, textarea:required.form-control:focus, select:required.form-control:focus{
border-color: #FF0000!important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6) !important;
}
input:required:invalid, textarea:required:invalid, select:required:invalid {border: 1px solid darkorange!important;}
input:required:valid, textarea:required:valid, select:required:valid { border: 1px solid black!important; }
这是您的select2代码：
<select id="select" required>
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<script>
$(document).ready(function() {
$('#select').select2();
});
</script>
您希望在select2组件需要时更改边框颜色。当选择了该组件中的某项（除了"Select"之外的任何选项）时，将边框颜色更改为黑色。这就是您的需求。这是您模板的JSFiddle链接。
英文:
I'm adding border color to input fields but can't apply this to select2 components.
<pre>
input:required.form-control:focus, textarea:required.form-control:focus, select:required.form-control:focus{
border-color: #FF0000!important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6) !important;
}
input:required:invalid, textarea:required:invalid, select:required:invalid {border: 1px solid darkorange!important;}
input:required:valid, textarea:required:valid, select:required:valid { border: 1px solid black!important; }
</pre>
This is my select2 codes:
<select id="select" required>
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<script>
$(document).ready(function() {
$('#select').select2();
});
</script>
Just want to make border color of select2 component if it's required. And when something selected in that component (anything but "Select" as you can guess) let the color be black. That's it.
This is JSFiddle link of my template.
答案1
得分: 2
我修改了你的fiddle代码
在fiddle https://jsfiddle.net/z2k5roLy/1/ 上
这些CSS行有助于
select.select2:required + .select2-container .select2-selection--single {
border-color: #FF0000;
}
select.select2:required:valid + .select2-container .select2-selection--single {
border-color: black;
}
英文:
I modified your fiddle code
in fiddle https://jsfiddle.net/z2k5roLy/1/
those css lines helps
select.select2:required + .select2-container .select2-selection--single {
border-color: #FF0000;
}
select.select2:required:valid + .select2-container .select2-selection--single {
border-color: black;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论