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

來源:互聯網
上載者:User

表單加星號意思是必填項了,這種功能我們其實見得也是非常的多了本文我們就一起來看一篇關於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 偽類來製作出一個星號。

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

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

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

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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.