css - 输入处于事件状态/焦点时删除表单标签

Question

尝试在输入处于事件/聚焦状态时删除图标。问题是 :after 不起作用。当我点击输入时，标签仍然可见。

尝试使用 content: none; 但没有成功。

#search-label {
	position: relative;
	font-weight: normal;
}

#search-label:before {
	content:"\f002";
    font-family: FontAwesome;
    font-size: 115%;
    position: absolute;
    color: #dddddd;
    top: 5px;
    left: 8px;
}

编辑:

<div class="form-group">
    <label id="search-label">
        <input id="search-form" class="form-control" placeholder="{% trans "Search" %}" type="text" name="q" value="{{ request.REQUEST.q }}">
    </label>
</div>

我可以用 CSS 做到这一点还是需要 JavaScript？

图片: http://imgur.com/a/pA1uN

Answer 1

这实际上取决于您的标记，以及您是否有自由和/或能力修改它。

是的，可以更改标记:纯 CSS 解决方案

如果你的标签是同级标签并且出现在输入之后，你可以根据输入元素本身的状态来切换它的显示状态，例如:

.input-row {
  position: relative;
}
.input-row label {
  position: absolute;
  left: 0;
}
.input-row label::before {
  transition: 1s;
  /* Just to show how the toggle works */
}
.input-row label.icon1::before {
  content: 'icon1';
}
.input-row label.icon2::before {
  content: 'icon2';
}
.input-row input {
  padding: 0 2rem 0;
}
.input-row input:focus + label::before,
.input-row input:active + label::before {
  opacity: 0;            /* To visually hide the label's pseudoelement */
  pointer-events: none;  /* To prevent any cursor-based interaction */
}

<form>
  <div class="input-row">
    <input type="text" name="input1" id="input1" />
    <label for="input1" class="icon1"></label>
  </div>
  <div class="input-row">
    <input type="text" name="input2" id="input2" />
    <label for="input1" class="icon2"></label>
  </div>
</form>

不，不能更改标记:仅 JS 解决方案

如果无法更改标记，您将被迫使用纯 JS 解决方案。这是因为 CSS 无法向后遍历(即选择 previous sibling 节点)或向上遍历父节点(即选择包装元素)。请记住，由于伪元素不是 DOM 的一部分，因此您无法通过 JS 选择它们。相反，您必须切换一个类才能执行隐藏/显示。

在我下面的概念验证示例中，使用您在更新问题后提供的标记，您可以看到如何使用 jQuery 来实现所需的功能。你当然可以在原生 JS 中重写 JS 函数 ;)

$(function() {
  $('.form-group :input')
    .focus(function() {
      $(this).closest('label').addClass('hide');
    })
    .blur(function() {
      $(this).closest('label').removeClass('hide');
    });
});

label {
  position: relative;
  font-weight: normal;
}
label::before {
  content: "icon";
  font-family: FontAwesome;
  font-size: 115%;
  position: absolute;
  top: 5px;
  left: 8px;
  transition: 1s;        /* Added just to show the effect of toggling opacity */
}
label.hide::before {
  opacity: 0;            /* To visually hide the label's pseudoelement */
  pointer-events: none;  /* To prevent any cursor-based interaction */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label id="search-label">
    <input id="search-form" class="form-control" placeholder="Search" type="text" name="q" value="">
  </label>
</div>