使用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 偽類別來製作出一個星號。

還是上邊的表單，刪除

* 這段程式碼，然後加入CSS：

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

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

用css3實作波紋特效與H5實作動態波效果

CSS3區域模組region的相關程式碼

如何用CSS實作帶有陰影效果的黑色導航選單效果

以上是使用CSS 給表單必選項新增星號的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！