使用CSS 給表單必選項添加星號的實現方法

在製作網頁表單的時候，如果一個選項是必填的，通常會給選項添加一個星號，下面通過給大家分享使用CSS 給表單必選項添加星號的實現方法，需要的朋友參考下吧

在製作網頁表單的時候，如果一個選項是必填的，通常會給選項添加一個星號，比如 Typecho 的評論表單：

<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%;}

例如：

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

還是上邊的表單，刪除 <span class="required">*</span> 這段代碼，然後添加 CSS：

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

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

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

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！