經過CSS 給界面必選項添加星號

        在製做網頁的時候，若是一個選項是必填的，一般會給選項添加一個紅色星號，來引發用戶的注意；最近筆者恰好碰見一個相似的需求，原本能夠用html標籤和style就可搞定，因爲筆者須要改動的界面比較多（六個）；好不容易將這些界面改完收工後，同事也在修改這幾個界面，發現這個樣式多處用到，並且筆者處理的方案同樣代碼重複率比較高，就建議筆者將這塊功能提取出來做爲公共的模塊，也方便他那塊使用；在此筆者也很是感謝同事提出的問題。好了，具體以下：

1. 界面效果（紅色星號爲css添加的模塊）

  

2. css模塊：

.addRedStar:after { content: '*'; color: red; font-size: 18px;
}

3. HTML模塊：

<li class="mui-table-view-cell pd_0">
                    <div class="mui-input-group business_form">
                        <div class="mui-input-row">
                            <label class='addRedStar' >支出類別</label>
                            <input type="text" id="issuesCategoryDesc" data-value="" placeholder="請選擇" name = "" class = "choose_category" readonly>
                        </div>
                        <div class="mui-input-row">
                            <label class='addRedStar' >支出項目</label>
                            <input type="text" id="issuesClassDesc" data-value="" placeholder="請選擇" name = "" class = "choose_project" readonly>
                        </div>
                        <div class="mui-input-row">
                            <label class='addRedStar' >經濟事項</label>
                            <input type="text" id="economicIssuesDesc" data-value="" placeholder="請選擇" name = "economicProject" class = "choose_economics" readonly>
                        </div>
                    </div>
 </li>

       如上述，html在須要的標籤加上css中聲名的addRedStar,就能夠在後邊加上標紅的星號。

    若是你們有更好的建議，請提出來，你們共同進步。