时间戳

首页 > 解决方案 > 在跨度顶部移动输入字段

html - 在跨度顶部移动输入字段

问题描述

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

我的问题是，当您尝试单击输入字段时，标签位于输入字段的“前面”并阻止您选择它。

我尝试使用 z-indexes 修复它，但这似乎不起作用。

有人可以帮我在跨度前面获取输入字段吗？

#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>

标签： htmlcss

解决方案

使用label而不是，无论占位符的位置如何，span您input都可以很好地点击

placeholder_input = document.querySelector('#input');
placeholder_label = document.querySelector('.container > label');

placeholder_input.onchange = function() {
  if (placeholder_input.value !== '') {
      placeholder_label.style.transform = 'translate3d(0, -26px, 0)';
  } else {
      placeholder_label.style.transform = '';
  }  
}
#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>

推荐阅读