在跨度顶部移动输入字段 [英] Move input field on top of span

问题描述

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

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

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

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

#input {颜色:#686868；垂直对齐:中间；填充:0px！重要；字体大小:16px；边框宽度:0；溢出:可见；框阴影:无；边界:无；边框底部:1px 实心 #d5dce3;背景颜色:透明！重要；}#输入:焦点{边框颜色:#1F76BC；}#标签 {颜色:RGBA(0,0,0,.99)；过渡时间函数:cubic-bezier(.075,.82,.165,1);过渡持续时间:0.5s；位置:绝对；宽度:100%；文本对齐:左；字体大小:16px；底部:6px；颜色:#8792a1；}.container:focus-within #label {变换:translate3d(0,-26px,0);颜色:RGBA(0,0,0,.99)；}.容器 {位置:相对；边距顶部:32px；}

<span id="label">省</span><input type="text" id="input" value="" size="40">

解决方案

使用 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)';} 别的 {placeholder_label.style.transform = '';}}

#input {颜色:#686868；垂直对齐:中间；填充:0px！重要；字体大小:16px；边框宽度:0；溢出:可见；框阴影:无；边界:无；边框底部:1px 实心 #d5dce3;背景颜色:透明！重要；}#输入:焦点{边框颜色:#1F76BC；}标签 {颜色:RGBA(0,0,0,.99)；过渡时间函数:cubic-bezier(.075,.82,.165,1);过渡持续时间:0.5s；位置:绝对；宽度:100%；文本对齐:左；字体大小:16px；底部:6px；颜色:#8792a1；}.container:focus-内标签{变换:translate3d(0,-26px,0);颜色:RGBA(0,0,0,.99)；}.容器 {位置:相对；边距顶部:32px；}

<label for="input">省</label><input type="text" id="input" value="" size="40">

I've a span as a label for my inputfield. The label goes above the input field when selected.

My problem is that when you try to click on the input field, the label is 'in front' of the inputfield and blocks you from selecting it.

I tried fixing it using z-indexes but this doesn't seem to work.

Can somebody help me with getting the input field in front of the span?

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

解决方案

use label instead of span and your input will be well clickable, regardless of the location of the placeholder

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>

这篇关于在跨度顶部移动输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！