Ответ 1

Возможно, вы можете немного скомпрометировать это.

Почему бы просто не поменять флажок .country-selector на переключатель в той же группе? Тогда у него есть именно то поведение, которое вы ищете, не создавая ситуации, требующей много обходного пути. Единственная проблема заключалась в том, чтобы предоставить пустое значение, если пользователь должен был отправить, пока ящик все еще открыт, но в любом случае проблема с вашей существующей реализацией.

Пример Codepen

Jade

input#country-selector(type='radio', name="country")

SCSS

&>[type=checkbox]

становится

&>[type=radio]

Я сделал несколько изменений стиля для пера, чтобы привести его в ряд с более традиционными выпадающими меню.

Очень интересная идея. Престижность в этом.

Ответ 2

изменить

Internet explorer будет обрабатывать прозрачный элемент, например event-pointer: none; там для одного нужно добавить фона-цвета + непрозрачность: 0. По крайней мере, сейчас можно открыть его в Internet Explorer: http://codepen.io/anon/pen/EargxL

изменить 2

Наконец-то я нашел способ поддержать интернет-проводник, он выглядит немного дрянным, я реорганизую его еще на один день: p http://codepen.io/anon/pen/ogmqpq

обратите внимание, что он не будет работать на большинстве мобильных устройств, поскольку не реализует: активный псевдоселектор: http://www.quirksmode.org/css/selectors/mobile.html#link5

оригинальный

Короче говоря, почти невозможно вызвать два переключателя проверенным селектором на разных входах одним щелчком.

Как можно было бы использовать псевдоселектор: focus в комбинации с: active.

<div class="dropDown">
    <div class="toggle" tabindex="0"></div>
    <ul class="list" tabindex="0">
        <li>
            <label>
                <input type="radio" name="myDropDown" value="someValue" checked="checked"/>
                <span>Item 1</span>
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="myDropDown" value="someValue"/>
                <span>Item 2</span>
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="myDropDown" value="someValue"/>
                <span>Item 3</span>
            </label>
        </li>
    </ul>
</div>

CSS

ul {
    list-style:none;
}
input {
    display:none;
}
.dropDown {
    position:relative;
}
.dropDown .toggle {
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
    outline:none;
}
.dropDown > .toggle:focus {
    z-index:0;
}
.dropDown > .list {
    position:relative;
    outline:none;
}
.dropDown > .list:active {
    z-index:1;
}
.dropDown > .toggle:not(:focus) + .list:not(:active) input:not(:checked) + span {
    display:none;
}

живой пример http://codepen.io/anon/pen/emxJWr

Примечание: это не будет работать в Internet Explorer, потому что: активный не пузырится, im открыт для любых предложений!

Ответ 3

только для любопытства pointer-events: doubleclick на input:checked + label позволит вам закрыть свой любимый селектор: http://codepen.io/gc-nomade/pen/NPJaNa

.options {
      &>li{
        &:hover {
          background-color: blue;
        }
        input[name=country]:checked+label {
          position: static;
          pointer-events:none;}
      }
    }

Ответ 4

Изменение z-индекса позволит пользователю щелкнуть по области меток, которая переключит ваше падение.

Смотрите мой обновленный код:       codepen ex

  .country-selector {
  display: inline-block;
  border: 1px solid black;
  position: relative;
  overflow: hidden;

  &:before {
    content: "▾";
    position: absolute;
    right: 5px;
    top: 5px;
    z-index:-1;
  }

Изменено поле .country-selector.options и снято с .country-selector padding-right.

Затем изменился .country-selector: before до z-index -1.

Не уверен, что это будет работать во всех браузерах/устройствах, но, похоже, работает на FF и chrome (OS x).

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

Ответ 5

Существует ошибка проверки, которая предотвращает ее правильную работу:

Метка элемента не должна отображаться как потомок элемента метки.

Если вы помещаете пробелы вместо внутренних меток, все работает нормально. У вас также есть несколько полей ввода внутри родительской метки, но для этого требуется большее исправление, так как вам нужно установить флажок country-selector.

Рабочая ручка.