Question

我正在尝试设置输入框的样式，因为我希望能够将占位符文本的一部分设为粗体。

我尝试使用：valid /：invalid但是由于某些奇怪的原因，在任何情况下都不会显示该块。

我做错了什么？

这是我的代码

＆＃13;

/* Search section */

.search_container {
  padding: 39px 27px;
}
.search_transparant_border {
  height: 90px;
}
.big_search_area {
  background: rgba(129, 163, 195, 0.7);
  padding: 15px;
  margin: 0 auto;
  width: 85%;
}
.big_search {
  background: url(../images/green_search_icon.png);
  width: 27px;
  height: 26px;
  position: absolute;
  top: 0;
  right: 0;
  margin: 12px;
  border: none;
  cursor: pointer;
}
.big_input_search {
  border: none;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  width: 100%;
  color: #949494;
  font-size: 22px;
  padding: 10px 35px 10px 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-appearance: none;
}
.big_search_area form p {
  position: absolute;
  top: 18px;
  left: 15px;
}
.big_search_area form p strong {
  color: #576877;
}
.big_search_area p {
  font-size: 20px;
  right: 60px;
  top: 17px;
}
.big_search_area form input:invalid + p {
  display: block;
}
.big_search_area form input:invalid {
  outline: none;
  box-shadow: none;
}
.big_search_area form input:valid + p {
  display: none;
}

＆＃13;

<!-- Search section -->
<div class="search_container">
  <div class="search_transparant_border">
    <div class="big_search_area">
      <div style="position:relative;">
        <form action="/search/" method="get" style="position: relative">
          <input type="search" value="" class="big_input_search" name="query" required />
          <input class=big_search type=submit value="" />
          <p>{% trans "Search products e.g." %} <strong>ipod</strong>
          </p>
        </form>

      </div>
    </div>

＆＃13;

Answer 1

在css的以下部分中，您使用的是form input。由于表格中有两个输入=＆gt; input + p可以使用submit输入，但您不希望这样。

.big_search_area form input:invalid + p {
  display: block;
}
.big_search_area form input:invalid {
  outline: none;
  box-shadow: none;
}
.big_search_area form input:valid + p {
  display: none;
}

所以使用html / css的解决方案只是将<p> </p>移到submit输入之上，如下所示：

<input type="search" value="" class="big_input_search" name="query" required />
<p>{% trans "Search products e.g." %} <strong>ipod</strong>
<input class=big_search type=submit value="" />

Answer 2

您正在使用adjacent sibling selector来尝试选择p代码，但由于p不是您正在验证的input的相邻兄弟（它与您的submit input相邻，永远不会被选中。

要选择p，您应该使用general sibling selector。

此外，为了简化您的CSS并避免任何潜在的问题，您应该使用您在选择器中提供text input的班级名称。

最后，您不需要:invalid选择器，因为p是块级元素，因此将其display属性设置为block是多余的。< / p>

总结一下，替换这两个CSS规则：

.big_search_area form input:invalid + p {
    display: block;
}
.big_search_area form input:valid + p {
    display: none;
}

有了这个：

.big_input_search:invalid~p{
    display:none;
}

输入样式，为什么在无效时不会显示我的块

2 个答案: