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,就可以在后边加上标红的星号。

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

  • 相关阅读:
    BiliBili, ACFun… And More!【递归算法】
    【VS2015】关于VS2015如何运行的问题
    【打死树莓派】-树莓派3代jessie+Opencv-解决安装不了libgtk2.0-dev包问题
    插入排序2.0
    【C++小白成长撸】--(续)单偶数N阶魔方矩阵
    【C++小白成长撸】--(续)双偶数N阶魔阵
    安装 python-opencv
    二叉树打印
    Kotlin接口
    Kotlin 继承
  • 原文地址:https://www.cnblogs.com/lidelin/p/9983152.html
Copyright © 2011-2022 走看看