詳解CSS 給表單必選項加上星號

表單加星號意思是必填項了，這種功能我們其實見得也是非常的多了本文我們就一起來看一篇關於CSS 給表單必選項添加星號的例子，希望能幫助到大家。

<script>ec(2);</script>

在製作網頁表單的時候，如果一個選項是必填的，通常會為選項加上一個星號，例如WordPress 的評論表單：

<p class="form-group">
   <label for="author">姓名</label> <span class="required">*</span>
   <input type="text" id="author" name="author" required="required" size="30" class="form-text">
  </p>

然後給星號加一點CSS 樣式：

  .form-group span.required {
   color: #999;
   font-size: 150%;
  }

 CSS 為表單必選項加上星號

但是有些時候我們可能無法修改HTML 結構，或是不想加入多餘無意義的標籤，這時可以利用CSS 的after 偽類來製作出一個星號。

還是上邊的表單，刪除* 這段程式碼，然後加入CSS：

  .form-group label:after {
   content: ' *';
   color: #999;
   font-size: 150%;
  }

這樣就可以透過CSS 來製作出一個代表必選的星號。

其實 CSS 的 before 和 after 偽類是非常好用的，大多數人只是拿它來清除浮動，其實腦洞開一下，好好利用這兩個偽類可以做出很神奇的事情。

相關推薦：

全面總結css中屬性值繼承知識

純CSS定製文字省略的方法大全

CSS段落屬性詳解

以上是詳解CSS 給表單必選項加上星號的詳細內容。更多資訊請關注PHP中文網其他相關文章！