纯CSS& HTML选择下拉表单(带标签)

时间:2017-11-27 10:40:50

标签: html css macos select dropdown

使用以下笔在Windows PC上的任何最新浏览器(包括IE11)中正常工作。谁能告诉我为什么它不能在Mac上运行?

  • 就像为什么一样:专注于不同的工作方式以及它如何以不同的方式工作(它实际上适用于Mac上的Chrome;但不适用于Safari和Firefox)

.fs_container {
  width: 12rem;
  position: relative;
}

#dropdown {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.fs_select {
  border: 1px solid grey;
  padding: 5px 10px;
  width: 100%;
  display: block;
  box-sizing: border-box;
  border-radius: 3px;
  background: white;
  position: relative;
  z-index: 0;
}
.blocker {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  z-index: -2;
}

.fs_dropdown {
  opacity: 0;
  list-style: none;
  padding: 0;
  border: 1px solid grey;
  border-top: none;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border-radius: 3px;
}
.fs_dropdown label {
  background: #FF530D;
  padding: 4px 10px;
  box-sizing: border-box;
  width: 100%;
  display: block;
  border-bottom: 2px dashed #E82C0C;
}
.fs_dropdown li:last-of-type label {
  border-bottom: none;
}
#dropdown:focus ~ ul {
  opacity: 1;
}
#dropdown:focus ~ div.blocker {
  z-index: 2;
}
.fs_selections input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
.fs_selections label.selected {
  position: absolute;
  top: 1px;
  left: 2px;
  padding: 5px 10px;
  width: 90%;
  box-sizing: border-box;
  opacity: 0;
  background: white;
}
.fs_selections input:checked + label.selected {
  opacity: 1;
}
<div class="fs_container">
  <input type="checkbox" id="dropdown" />
  <label for="dropdown" class="fs_select">Select</label>
  <div class="fs_select blocker">&nbsp;</div>
  <ul class="fs_dropdown">
    <li><label for="fa">Option a</label></li>
    <li><label for="fb">Option b</label></li>
    <li><label for="fc">Option c</label></li>
  </ul>

  <div class="fs_selections">
    <input type="radio" value="Option a" name="languages" id="fa" />
    <label for="dropdown" class="selected">Option a</label>
    <input type="radio" value="Option b" name="languages" id="fb" />
    <label for="dropdown" class="selected">Option b</label>
    <input type="radio" value="Option c" name="languages" id="fc" />
    <label for="dropdown" class="selected">Option c</label>
  </div>
</div>

0 个答案:

没有答案