Отключите функцию jquery, когда щелкните за пределами div

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, но .select-selected добавляется в div большим количеством javascript, вы можете увидеть полный код, который я использую здесь: 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>