Есть ли способ добавить стили к тегу выбора, когда он находится в фокусе, а также имеет раскрывающийся список - PullRequest
Новая
       30

Есть ли способ добавить стили к тегу выбора, когда он находится в фокусе, а также имеет раскрывающийся список

1 голос
/ 07 мая 2020

Итак, я делаю страницу с кучей фрагментов html и css, которые могут мне понадобиться в будущем, и я успешно настроил тег <select>, добавив отступы, удалив внешний вид по умолчанию и вставив собственный каретку, я также добавил радиус границы, равный сумме верхнего и нижнего отступов, чтобы углы были полностью закруглены. Мой вопрос: как сделать, чтобы border-bottom-left-radius и border-bottom-right-radius равнялись 0, только когда раскрывающийся список открыт, чтобы они выглядели связанными? HTML: 

<!-- Don't ask about the languages lol -->
<select name="language" class="select">
    <option value="" selected="selected" disabled>Select a language</option>
    <option value="klingon">Klingon</option>
    <option value="sindarin">Sindarin</option>
    <option value="dothraki">Dothraki</option>
    <option value="aramaic">Aramaic</option>
    <option value="latin">Latin</option>
    <option value="akkadian">Akkadian</option>
</select>

CSS: 

.select {
    display: block;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 400;
    color: var(--text);
    padding: 10px 30px 10px 15px;
    box-sizing: border-box;
    margin: none;
    border: none;
    outline: 0;
    border-radius: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bg);
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='caret-down' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-caret-down fa-w-10 fa-3x'%3E%3Cpath fill='white' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z' class=''%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-position: right 15px top 50%, 0 0;
    background-size: .65em auto, 100%;
    transition: all 200ms ease-in;
}

.select:focus {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

Как видите, я пробовал .select:focus, но он остается в фокусе после того, как вы выбрали свой вариант и выглядит глупо сам по себе с квадратными углами внизу. Я также пробовал .select:hover:focus, который работает до тех пор, пока курсор не покинет элемент выбора и правило стиля больше не применяется.

PS: в темном режиме --bg равно # 222222, --text равно до #FFFFFF и в облегченном режиме они равны #EEEEEE и # 000000 соответственно. PPS: Я также пробовал .select:focus:enabled, и это работает, но опять же, как только я выберу вариант и выпадающий список исчезнет, ​​стили все еще будут в силе.

1 Ответ

1 голос
/ 07 мая 2020

Насколько мне известно, нет способа стилизовать раскрывающийся список.

Но я думаю, что есть способ решить эту проблему, это написать свой собственный раскрывающийся список с некоторыми кодами JavaScript.

Вы можете проверить здесь ПОЧЕМУ: https://css-tricks.com/dropdown-default-styling/

Надеюсь, это поможет

...