提问者:小点点

在跨度顶部移动输入字段


我有一个span作为输入字段的标签。选中时,标签位于输入字段上方。

我的问题是,当你尝试点击输入字段时,标签就在输入字段的前面,阻止你选择它。

我尝试用z索引来修复它,但这似乎不起作用。

有人能帮我得到跨度前面的输入字段吗?

null

#input {
  color: #686868;
  vertical-align: middle;
  padding: 0px !important;
  font-size: 16px;
  border-width: 0;
  overflow: visible;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #d5dce3;
  background-color: transparent !important;
}

#input:focus {
  border-color: #1F76BC;
}

#label {
  color: rgba(0,0,0,.99);
  transition-timing-function: cubic-bezier(.075,.82,.165,1);
  transition-duration: .5s;
  position: absolute;
  width: 100%;
  text-align: left;
  font-size: 16px;
  bottom: 6px;
  color: #8792a1;
}

.container:focus-within #label {
    transform: translate3d(0,-26px,0);
    color: rgba(0,0,0,.99);
}

.container {
  position: relative;
  margin-top: 32px;
}
<div class="container">
   <span id="label">Provincie</span>
   <input type="text" id="input" value="" size="40"> 
</div>

null


共3个答案

匿名用户

使用label而不是span,无论占位符的位置如何,您的输入都可以很好地单击

null

#input {
  color: #686868;
  vertical-align: middle;
  padding: 0px !important;
  font-size: 16px;
  border-width: 0;
  overflow: visible;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #d5dce3;
  background-color: transparent !important;
}

#input:focus {
  border-color: #1F76BC;
}

label {
  color: rgba(0,0,0,.99);
  transition-timing-function: cubic-bezier(.075,.82,.165,1);
  transition-duration: .5s;
  position: absolute;
  width: 100%;
  text-align: left;
  font-size: 16px;
  bottom: 6px;
  color: #8792a1;
}

.container:focus-within label {
    transform: translate3d(0,-26px,0);
    color: rgba(0,0,0,.99);
}

.container {
  position: relative;
  margin-top: 32px;
}
<div class="container">
   <label for="input">Provincie</label>
   <input type="text" id="input" value="" size="40"> 
</div>

匿名用户

像这样的东西??

null

#input {
  color: #686868;
  vertical-align: middle;
  padding: 0px !important;
  font-size: 16px;
  border-width: 0;
  overflow: visible;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #d5dce3;
  background-color: transparent !important;
}

#input:focus {
  border-color: #1F76BC;
}

#label {
  color: rgba(0, 0, 0, .99);
  transition-timing-function: cubic-bezier(.075, .82, .165, 1);
  transition-duration: .5s;
  position: absolute;
  width: 100%;
  text-align: left;
  font-size: 16px;
  bottom: 6px;
  color: #8792a1;
}

.container:focus-within #label {
  transform: translate3d(0, -26px, 0);
  color: rgba(0, 0, 0, .99);
}

.container {
  position: relative;
  margin-top: 32px;
}
<div class="container">
  <input type="text" id="input" value="" size="40" placeholder="Provincie">
</div>

匿名用户

请添加此样式。

#input{
  position:relative;
  z-index:999;
}

null

#input {
  color: #686868;
  vertical-align: middle;
  padding: 0px !important;
  font-size: 16px;
  border-width: 0;
  overflow: visible;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #d5dce3;
  background-color: transparent !important;
  position:relative;
  z-index:999;
}

#input:focus {
  border-color: #1F76BC;
}

#label {
  color: rgba(0,0,0,.99);
  transition-timing-function: cubic-bezier(.075,.82,.165,1);
  transition-duration: .5s;
  position: absolute;
  width: 100%;
  text-align: left;
  font-size: 16px;
  bottom: 6px;
  color: #8792a1;
}

.container:focus-within #label {
    transform: translate3d(0,-26px,0);
    color: rgba(0,0,0,.99);
}

.container {
  position: relative;
  margin-top: 32px;
}
<div class="container">
   <span id="label">Provincie</span>
   <input type="text" id="input" value="" size="40"> 
</div>