Question

我不知道如何很好地解释这个问题，但我会尽我所能。

我有这个css代码：

input[type=text]{
  text-align: center;
  border: none;
  background-color: #EBEBEB;
  border-radius: 5px;
  width: 100%;
  padding: 12px;
  margin-top: 25px;
  display: inline-block;
  box-sizing: border-box;
  font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}

此输入正在干扰我不想要的其他输入。

我希望其他输入文本具有以下元素：

#text_bar{
   width: 65%;
   height: 70%;
   text-align: center;
   border-radius: 10px;
   font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
   border: none;
   position: absolute;
   left: 5px;
   top:13%;
}

<div id="searchBox">
  <form action="http://dev.didieranddandelion.co.uk/shop/product-searched.php" method="post" id="search_form">
      <input name="search_input" type="text" id="text_bar" placeholder="Search Bar">
      <input type="submit" id="search_btn" value="Search">
  </form>
</div>

如何获取输入以忽略来自css的那些元素并仅保留text_bar中的元素？

Answer 1

使用not()选择器，如下所示：

＆＃13;

input[type=text]:not(#text_bar) {
  text-align: center;
  border: none;
  background-color: red;
  border-radius: 5px;
  width: 100%;
  padding: 12px;
  margin-top: 25px;
  display: inline-block;
  box-sizing: border-box;
  font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}

#text_bar {
  width: 65%;
  height: 70%;
  text-align: center;
  border-radius: 10px;
  font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
  border: none;
  position: absolute;
  left: 5px;
  top: 13%;
}

＆＃13;

<div id="searchBox">
  <form action="http://dev.didieranddandelion.co.uk/shop/product-searched.php" method="post" id="search_form">
    <input name="search_input" type="text" id="text_bar" placeholder="Search Bar">
    <input type="submit" id="search_btn" value="Search">
  </form>
</div>

＆＃13;

忽略另一个div类中INPUT的设置元素

1 个答案: