html - 如何制作通用输入字段类

Question

我正在试验 BEM (CSS)，我想知道如何创建一个类来设置所有文本字段背景颜色和边框的样式(我还没有使用 CSS 预处理器)。

例如，我在搜索字段和联系表单中(以及其他 5 个位置)都有一个文本字段。然后我不想在这两种情况下设置相同的背景颜色和边框样式，我想要一个用于所有字段的 .input 类。

可以像这样在两个元素上添加 .input 类:

<!-- Searchbox -->
<div class="searchbox">
   <input type="text" class="searchbox__field input">
   <button class="searchbox__button>Search!</button>
</div>

<!-- Contact form-->
<form class="contact-form">
   <div class="contact-form__control">
      <label class="contact-form__label">Name:</label>
      <input class="contact-form__field input">
   </div>
</form>

<!-- .input styling for all fields -->
<style>

   .input {
      border: 1px solid green;
      background-color: #dbdbdb;
      border-radius: 5px;
   }

</style>

Answer 1

Can add the .input class on both elements like this

是的，你可以:

<input type="text" class="searchbox__field input">

这里有一个混合:同一个 DOM 节点既是元素 (.searchbox__field) 又是 block (.input)。

另请参阅:the official documentation .