zoukankan      html  css  js  c++  java
  • 通过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,就可以在后边加上标红的星号。

        如果大家有更好的建议,请提出来,大家共同进步。

  • 相关阅读:
    排查线上问题常用的几个Linux命令
    OAuth2简易实战(一)-四种模式
    程序员必备的网站推荐
    C++ sizeof
    C++ 求余运算符
    C++ mutable(可变的)
    C++ const_cast用法
    C++常变量和文字常量
    C++中 <iso646.h>头文件
    java-网络编程-使用URLDecoder和URLEncoder
  • 原文地址:https://www.cnblogs.com/lidelin/p/9983152.html
Copyright © 2011-2022 走看看