仅使用CSS模拟选择框

时间：2017-09-07 11:24:23

标签： html css drop-down-menu

根据我发现的一些代码，我只能使用CSS制作一种选择菜单。

但是现在我有一个覆盖div的问题。这意味着，“选择菜单”下方的所有div都在悬停时向下移动或单击该菜单。

我尝试过使用z-index和定位而没有成功。我相信它非常简单，但我看到这段代码已经很长时间了，我疯了。

select deviceName,device_id,type from deviceTble 

body {
  width: 100%;
  min-height: 500px;
  margin: 3em auto;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
}

h1 {
  text-align: center;
  color: #fff;
  font-weight: 300;
  font-size: 50px;
  font-family: ProximaNovaSoftW03-Semibold;
  letter-spacing: 0px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.02), 2px 2px rgba(0, 0, 0, 0.02), 3px 3px rgba(0, 0, 0, 0.02), 4px 4px rgba(0, 0, 0, 0.02), 5px 5px rgba(0, 0, 0, 0.02), 6px 6px rgba(0, 0, 0, 0.02), 7px 7px rgba(0, 0, 0, 0.02);
}

h1 i {
  position: relative;
  font-size: 70px;
}

p {
  text-align: center;
  color: #000;
  font-size: 14px;
  margin-bottom: 2em;
  line-height: 30px;
}

p img {
  position: relative;
  top: 8px;
  right: 10px;
}

.paragrafo {
  width: 100%;
  background-color: #e1e1e1;
  position: fixed;
}

.reserve-select {
  position: relative;
  overflow: hidden;
  display: block;
  margin: auto;
  width: 330px;
  height: 100%;
  border-bottom: 0px;
  border-radius: 3px;
  font-size: 12px;
  box-shadow: 0px 1em 1em -1.5em rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.reserve-select:not(:hover)>i.toggle.icon-arrow-down {
  display: block !important;
}

.reserve-select:not(:hover)>i.toggle.icon-arrow-up {
  display: none !important;
}

.reserve-select:not(:hover) label.option>input:not(:checked)~span.title {
  display: none !important;
}

.reserve-select>i.toggle {
  position: absolute;
  z-index: 4;
  right: 1.5em;
  top: 1.6em;
  color: #ccc;
}

.reserve-select .title,
.reserve-select .placeholder {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 1.5em 2em;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.reserve-select>input {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  cursor: pointer;
}

.reserve-select>input:checked~i.toggle.icon-arrow-down {
  display: none;
}

.reserve-select>input:checked~i.toggle.icon-arrow-up {
  display: block;
}

.reserve-select>input:checked div.options label.option .title {
  display: none !important;
}

.reserve-select>input:not(:checked) {
  z-index: 4;
}

.reserve-select>input:not(:checked)~label.option>span.title {
  display: none;
}

.reserve-select>input:not(:checked)~i.toggle.icon-arrow-up {
  display: none;
}

.reserve-select>input:not(:checked)~i.toggle.icon-arrow-down {
  display: block;
}

.reserve-select>input:disabled {
  cursor: no-drop;
}

.reserve-select>span.placeholder {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 100%;
  color: #999;
  border-top: 0px;
}

.reserve-select label.option {
  display: block;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  transition: all 1s ease-out;
}

.reserve-select label.option span.title {
  position: relative;
  z-index: 2;
  transition: background .3s ease-out;
}

.reserve-select label.option span.title i.icon {
  padding-right: 8px;
  color: #92a8d1;
}

.reserve-select label.option span.title:hover {
  color: white;
  background: #3498db;
  box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}

.reserve-select label.option input {
  display: none;
}

.reserve-select label.option input:checked~span.title {
  position: absolute;
  display: block;
  z-index: 3;
  top: 0px;
  font-size: 12px;
  background: #fff;
  border-top: 0px;
  box-shadow: none;
  color: inherit;
  width: 100%;
}

.reserve-select label.option input:disabled~span.title {
  background: #f9f9f9 !important;
  color: #aaa;
}

.reserve-select label.option input:disabled~span.title:hover {
  color: #aaa;
  background: none;
  cursor: no-drop;
}

LINK：https://jsfiddle.net/o2gxgz9r/13580/

1 个答案:

答案 0 :(得分：0)

尝试这个。在div中包含选项并为该div提供绝对位置

＆＃13;
＆＃13; 
body {
  width: 100%;
  min-height: 500px;
  margin: 3em auto;
  background: white;

  /* IE6-9 fallback on horizontal gradient */
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
}

h1 {
  text-align: center;
  color: #fff;
  font-weight: 300;
  font-size: 50px;
  font-family: ProximaNovaSoftW03-Semibold;
  letter-spacing: 0px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.02), 2px 2px rgba(0, 0, 0, 0.02), 3px 3px rgba(0, 0, 0, 0.02), 4px 4px rgba(0, 0, 0, 0.02), 5px 5px rgba(0, 0, 0, 0.02), 6px 6px rgba(0, 0, 0, 0.02), 7px 7px rgba(0, 0, 0, 0.02);
}
h1 i {
  position: relative;
  font-size: 70px;
}

p {
  text-align: center;
  color: #000;
  font-size: 14px;
  margin-bottom: 2em;
  line-height: 30px;
}
p img {
  position: relative;
  top: 8px;
  right: 10px;
}

.paragrafo {
  width:100%;
  background-color: #e1e1e1;
  z-index: 1;
}

.reserve-select {
  position: relative;
  //overflow: hidden;
  display: block;
  margin: auto;
  width: 330px;
  height: 100%;
  border-bottom: 0px;
  border-radius: 3px;
  font-size: 12px;
  box-shadow: 0px 1em 1em -1.5em rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.reserve-select:not(:hover) > i.toggle.icon-arrow-down {
  display: block !important;
}
.reserve-select:not(:hover) > i.toggle.icon-arrow-up {
  display: none !important;
}
.reserve-select:not(:hover) label.option > input:not(:checked) ~ span.title {
  display: none !important;
}
.reserve-select > i.toggle {
  position: absolute;
  z-index: 4;
  right: 1.5em;
  top: 1.6em;
  color: #ccc;
}
.reserve-select .title,
.reserve-select .placeholder {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 1.5em 2em;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.reserve-select > input {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  cursor: pointer;
}
.reserve-select > input:checked ~ i.toggle.icon-arrow-down {
  display: none;
}
.reserve-select > input:checked ~ i.toggle.icon-arrow-up {
  display: block;
}
.reserve-select > input:checked div.options label.option .title {
  display: none !important;
}
.reserve-select > input:not(:checked) {
  z-index: 4;
}
.reserve-select > input:not(:checked) ~ label.option > span.title {
  display: none;
}
.reserve-select > input:not(:checked) ~ i.toggle.icon-arrow-up {
  display: none;
}
.reserve-select > input:not(:checked) ~ i.toggle.icon-arrow-down {
  display: block;
}
.reserve-select > input:disabled {
  cursor: no-drop;
}
.reserve-select > span.placeholder {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 100%;
  color: #999;
  border-top: 0px;
}
.reserve-select label.option {
  display: block;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  transition: all 1s ease-out;
}
.reserve-select label.option span.title {
  position: relative;
  z-index: 2;
  transition: background .3s ease-out;
}
.reserve-select label.option span.title i.icon {
  padding-right: 8px;
  color: #92a8d1;
}
.reserve-select label.option span.title:hover {
  color: white;
  background: #3498db;
  box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.reserve-select label.option input {
  display: none;
}
.reserve-select label.option input:checked ~ span.title {
  position: absolute;
  display: block;
  z-index: 3;
  top: 0px;
  font-size: 12px;
  background: #fff;
  border-top: 0px;
  box-shadow: none;
  color: inherit;
  width: 100%;
}
.reserve-select label.option input:disabled ~ span.title {
  background: #f9f9f9 !important;
  color: #aaa;
}
.reserve-select label.option input:disabled ~ span.title:hover {
  color: #aaa;
  background: none;
  cursor: no-drop;
}
.options{
  position:absolute;
  top:50px;
  width:100%;
}
＆＃13; 
<body>

<div class="reserve-select">
  <input type="radio" name="option">
  <span class="placeholder">Choose...</span>
<div  class="options">
 <label class="option">
    <input type="radio" name="option">
    <span class="title">Speedometer</span>
  </label>
  <label class="option">
    <input type="radio" name="option">
    <span class="title">Fire</span>
  </label>
  <label class="option">
    <input type="radio" name="option">
    <span class="title">Badge</span>
  </label>
</div>
 
</div>

<div class="paragrafo">
  <p>Teste</p>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题