修改input默认样式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了修改input默认样式相关的知识,希望对你有一定的参考价值。

不说话,直接上代码

不需要图片,css解决

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <title>修改input默认样式</title>
        <style>
            .subject_mask {
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0, 0, 0, 0.5);
            }
            
            .double_maskborder {
                height: 180px;
                width: 245px;
                background: #FFFFFF;
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                border-radius: 5px;
                box-sizing: border-box;
                padding: 20px;
            }
            
            .double_code {
                color: #FFFFFF;
                background: #9c27b0;
                display: inline-block;
                padding: 10px 65px;
                border-radius: 3px;
                font-size: 14px;
            }
            .smart-form .radio {
                position: relative;
                padding-left: 20px;
                line-height: 25px;
            }
            
            .smart-form .radio input {
                position: absolute;
                left: -9999px;
            }
            
            .smart-form .radio i {
                position: absolute;
                top: 0px;
                left: 0;
                width: 12px;
                height: 12px;
                outline: 0;
                border-width: 1px;
                border-style: solid;
                border-radius: 50%;
            }
            
            .smart-form .radio input+i:after {
                content: ‘‘;
                top: 0px;
                left: 0px;
                width: 13px;
                height: 13px;
                border-radius: 50%;
                position: absolute;
                opacity: 0;
                transition: opacity .1s;
                -webkit-transition: opacity .1s;
                background-color: guolao #9c27b0;
                
            }
            
            .smart-form .radio input:checked+i:after {
                opacity: 1;
            
            }
            .smart-form .radio input:checked+i {
                border: none;
            
            }
        </style>
    </head>

    <body>
        <div class="subject_mask">
            <div class="double_maskborder">
                <p>您需要购买的科数?</p>
                <form action="" class="smart-form">

                    <section>
                        <div class="row">
                            <div class="col col-4">
                                <label class="radio">
                        <input type="radio" name="subject" checked="checked">
                        <i></i>1科</label>
                                <label class="radio">
                        <input type="radio" name="subject">
                        <i></i>2科</label>
                                <label class="radio">
                        <input type="radio" name="subject">
                        <i></i>3科</label>
                                <label class="radio">
                        <input type="radio" name="subject">
                        <i></i>4科</label>
                            </div>

                        </div>
                    </section>

                </form>

                <p class="double_code">领取优惠码</p>
            </div>

        </div>

    </body>

</html>

以上是关于修改input默认样式的主要内容,如果未能解决你的问题,请参考以下文章

select input 默认样式修改

uni-app radio的样式如何修改

修改input默认样式

React 项目中修改 Ant Design 的默认样式(Input Checkbox 等等

checkbox默认样式

elementui的默认样式怎么修改