Question

我正在设计表单的样式，并使用了一些用于自定义选择下拉菜单的jQuery，这是为了在单击时将边框颜色更改为黑色，但是当您单击另一个输入字段时，它应该重置为灰色，我为普通的输入字段设置了一个切换类设置，但是由于选择菜单是高度自定义的，因此我只需要使用以下代码更改颜色即可：

$('.select-selected').on('click', function(e){
    e.preventDefault();
    $(this).css('border', '1px solid black');
});

是否可以添加此内容，以便再次单击或最好单击.select-selected之外的位置时，它会重置功能并返回灰色边框？感谢任何帮助。

HTML：

<div class="custom-select" type="text" name="enquiry" style="width:100%;" style="max-width:100%;">
    <select class="input-select">
        <option value="0">Select Enquiry Type</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>
</div>

添加了html，但更多的javascript将.select-selected添加到div中，可以在此处查看我使用的完整代码： https://www.w3schools.com/howto/howto_custom_select.asp

Answer 1

除非特别需要jQuery，否则我建议您可以完全使用CSS做到这一点...

.input-select { border:1px solid red; }
.input-select:focus { border:1px solid black; }

<div class="custom-select" type="text" name="enquiry" style="width:100%;" style="max-width:100%;">
    <select class="input-select">
        <option value="0">Select Enquiry Type</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>
</div>

否则，如果您确实需要通过jQuery进行操作，则可以使用blur事件...

$('.input-select').on('click', function(e){
    e.preventDefault();
    $(this).css('border', '1px solid black');
}).on('blur', function(e) {
    $(this).css('border', '');
});

.input-select { border:1px solid red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-select" type="text" name="enquiry" style="width:100%;" style="max-width:100%;">
    <select class="input-select">
        <option value="0">Select Enquiry Type</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>
</div>

在div外部单击时关闭jquery功能

1 个答案: