首頁 > web前端 > css教學 > 詳解CSS 給表單必選項加上星號

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

小云云
發布: 2017-12-13 13:06:46
原創
3423 人瀏覽過

表單加星號意思是必填項了,這種功能我們其實見得也是非常的多了本文我們就一起來看一篇關於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: &#39; *&#39;;
   color: #999;
   font-size: 150%;
  }
登入後複製

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

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

相關推薦:

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

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

CSS段落屬性詳解

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

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板