Question

我在输入字段中创建了浮动标签。在chrome视图中工作正常，但在mozilla firefox中没有正确查看，请任何人帮助我，如何编写代码，注意：请在输入字段中建议不使用javascript且不需要属性。

我的代码已附上

＆＃13;

.has-float-label
{
    position:relative
}
.has-float-label label
{
    position:absolute;
    left:0;top:0;
    cursor:text;
    font-size:75%;
    opacity:1;
    -webkit-transition:all .2s;
    transition:all .2s
}
.has-float-label select
{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none
}
.has-float-label .form-control
{
    font-size:inherit;
    padding-top:1em;
    margin-bottom:2px;
    border:0;
    border-radius:0;
    background:0 0;
    border-bottom:2px solid rgba(0,0,0,.1)
}
.has-float-label .form-control::-webkit-input-placeholder
{
    opacity:1;
    -webkit-transition:all .2s;
    transition:all .2s
}
.has-float-label .form-control::-moz-input-placeholder
{
    opacity:1;
    -moz-transition:all .2s;
    transition:all .2s
}

.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder
{
    opacity:0
}

.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-input-placeholder
{
    opacity:0
}

.has-float-label .form-control:placeholder-shown:not(:focus)+label
{
    font-size:150%;
    opacity:.5;
    top:.25em
}
.has-float-label .form-control:focus
{
    outline:0;
    border-color:rgba(0,0,0,.5)
}
.input-group .has-float-label
{
    display:inline-block
}

＆＃13;

<div class="form-group has-float-label">
    <input class="form-control" id="first" type="text" placeholder="First Last"/>
    <label for="first">Name</label>
  </div>

＆＃13;

Answer 1

首先，我们从代码中删除与select css选择器对应的所有样式，因为我们不需要它。选择器.has-float-label，.has-float-label label和.has-float-label .form-control保持不变，因为它与您要完成的任务无关。

现在主要部分。

.has-float-label .form-control::-webkit-input-placeholder
.has-float-label .form-control::-moz-placeholder
.has-float-label .form-control:-ms-input-placeholder
.has-float-label .form-control::placeholder

::placeholder伪元素（一个在DOM中不可见的可见事物）允许我们设置占位符文本的样式（它包装实际的占位符文本）。在这种情况下，我们添加transition属性，以便在用户点击输入时进行平滑过渡。

我们使用平台原生选择器（-webkit-用于Safari和Chrome，-moz-用于Firefox，-ms-用于Internet Explorer），以使我们的代码更符合标准。

::placeholder选择器不是主要CSS标准的一部分。 出于同样的原因，我们还添加了-webkit-平台原生选择器。

.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder
.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder
.has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder
.has-float-label .form-control:placeholder-shown:not(:focus)::placeholder

以上选择器非常有趣。让我们分解它们：

placeholder-shown伪类在显示占位符文本时选择<input>。

not(:focus)是一个CSS3选择器匹配每个非:focus的元素。这允许我们隐藏占位符文本，并在光标不在input元素内时仅显示标签。

再次使用

placeholder的原因与我们描述的相同。值为零的opacity属性允许我们隐藏占位符文本。

最后，.has-float-label .form-control:placeholder-shown:not(:focus) + *会使标签过渡到顶部。

＆＃13;

.has-float-label {
  position: relative;
}
.has-float-label label {
  position: absolute;
  left: 0;
  top: 0;
  cursor: text;
  font-size: 75%;
  opacity: 1;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.has-float-label .form-control {
font-size:inherit;
    padding-top:1em;
    margin-bottom:2px;
    border:0;
    border-radius:0;
    background:0 0;
    border-bottom:2px solid rgba(0,0,0,.1)
}
.has-float-label .form-control::-webkit-input-placeholder {
  -webkit-transition: all .2s;
  transition: all .2s;
}
.has-float-label .form-control::-moz-placeholder {
  -webkit-transition: all .2s;
  transition: all .2s;
}
.has-float-label .form-control:-ms-input-placeholder {
  -webkit-transition: all .2s;
  transition: all .2s;
}
.has-float-label .form-control::placeholder {
  -webkit-transition: all .2s;
  transition: all .2s;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
  opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder {
  opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder {
  opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::placeholder {
  opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
  font-size: 150%;
  opacity: .5;
  top: .25em;
}
.has-float-label .form-control:focus {
  outline: none;
  border-color: rgba(0, 0, 0, 0.5);
}

＆＃13;

<div class="form-group has-float-label">
    <input class="form-control" id="first" type="text" placeholder="First Last"/>
    <label for="first">Name</label>
  </div>

＆＃13;

注意：以上代码不适用于Edge。要使其工作，请更改以下内容：

/* Remove this */
/* has-float-label .form-control:placeholder-shown:not(:focus)::placeholder {
 *   opacity: 0;
 * }
 */
/* Add the following lines */

.has-float-label .form-control:not(:focus)::-ms-input-placeholder {
  opacity: 0;
}

在输入字段中浮动标签，支持所有浏览器，没有js且没有必需属性

1 个答案: