在一般网页中表单元素是非常容易简单的,比如输入框,按钮,单选,复选等各种表单元素都是用来用户提交信息的,但是唯一的缺点就是一些表单元素无法修改本身的样式,导致很难看。

表单元素修改起来其实也不是很难,一般都是有两种办法,一是用css去修改他,二是用Js去伪造一个一样的效果。

Css修改和Js伪造都是有好有坏的,有些要很多代码,有些则很少。

输入框和按钮元素是直接可以修改的,无需伪造。

但是单选按钮、复选框、下拉框、文件上传则无法直接修改。所以就必须用到其他办法来去修改他。

如果用Css去修改他的话,并不难,Html提供了一个元素叫 label标签,但是很多人没有用到这个标签,该标签的属性for可以指向表单元素的id,就相当于点击label标签就点击到了指向的表单元素。

文件上传、复选框推荐使用Html的label标签修改,单选按钮下拉框则推荐使用Js伪造。

文件上传修改(File)

<style>
        #upfile{
            display:none;//隐藏元素
        }
        #file #selectFile{
            border:1px solid #09aaea;
            color:#fff;
            border-radius:3px;
            background-color: #09aaea;
            margin:2px 5px;
            cursor:pointer;
            padding:2px 5px;
            font-size:12px;
        }
</style>
<div id="file">
    <input type="file" id="upfile">
    <label for="upfile" id="selectFile">选择文件</label>
</div>

复选框修改(Checkbox)

<style>
        #checkbox input[type=checkbox]{
            display:none;
        }
        #checkbox label{
            border:1px solid #7c7d71;
            text-decoration:none;
            color:#fff;
            border-radius:3px;
            background-color: #7c7d71;
            float:left;
            margin:2px 5px;
            padding:2px 5px;
            font-size:12px;
            cursor:pointer;
        }
        #checkbox .checkbox input[type=checkbox]:checked+label{
            background-color: #09aaea;
            border:1px solid #09aaea;
        }
    </style>

<div id="checkbox">
    <div class="checkbox">
        <input type="checkbox" id="checkbox1">
        <label for="checkbox1">选择1</label>
    </div>
    <div class="checkbox">
        <input type="checkbox" id="checkbox2">
        <label for="checkbox2">选择2</label>
    </div>
    <div class="checkbox">
        <input type="checkbox" id="checkbox3">
        <label for="checkbox3">选择3</label>
    </div>
</div>

 以上就是label标签用css修改的办法,上面2个我觉得就label标签的方法快捷一点,radio如果用label标签的话反而会多一些标签。

伪造元素我用了JQuery,大家请自行添加。

<script src="https://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>

单选按钮修改(radio)

<div id="radio">
    <input type="hidden" id="radio_value" value="男">
    <a href="javascript:;" name="男" class="click">男</a>
    <a href="javascript:;" name="女">女</a>
    <a href="javascript:;" name="保密">保密</a>
    <button onclick="alert($('#radio_value').val())">获取单选结果</button>
</div>
<style>
        #radio{
            overflow:hidden;
        }
        #radio a{
            border:1px solid #7c7d71;
            text-decoration:none;
            color:#fff;
            border-radius:3px;
            background-color: #7c7d71;
            float:left;
            margin:2px 5px;
            padding:2px 5px;
            font-size:12px;
        }
        #radio a.click{
            background-color: #09aaea;
            border:1px solid #09aaea;
        }
</style>

<script type="text/javascript">
    $(function(){
        //单选按钮
        $("#radio a").click(function(){
            $("#radio #radio_value").val($(this).attr("name"));//修改选择的名称
            $(this).addClass("click").siblings().removeClass("click");
        });
    })
</script>

 下拉选择框(select)

<div id="select" class="input">
    <input type="hidden" id="select_value" value="选择1">
    <p>
        <em>选择1</em>
    </p>
    <ul>
        <li name="选择1">选择1</li>
        <li name="选择2">选择2</li>
        <li name="选择3">选择3</li>
        <li name="选择4">选择4</li>
        <li name="选择5">选择5</li>
        <li name="选择6">选择6</li>
    </ul>
</div>

<style>
        #select p{
            background:url("x.png") no-repeat 90px 3px;/*此处的图片是下拉框右侧的向下三角图标*/
        }
        #select em{
            font-size:14px;
            color:#555;
            /*padding:2px 5px;*/
            font-style: normal;
            border:1px solid #ccc;
            width:100px;
            display:block;
            cursor:pointer;
            padding:2px 5px;
        }
        #select ul{
            margin-top:-1px;
            background:#fff;
            display:none;
            position:absolute;
            border:1px solid #ccc;
            width:110px;
        }
        #select ul li{
            padding:2px 5px;
            color:#555;
            font-size:14px;
            cursor:pointer;
            list-style-type:none;
        }
        #select ul li:hover{
            background:#ccc;
            color:#fff;
        }
</style>

<script type="text/javascript">
    $(function(){
        //下拉选择
        $("#select p").click(function(){
            $("#select ul").fadeIn(0);
        });
        $("#select ul li").click(function(){
            $("#select_value").val($(this).attr('name'));
            $("#select p em").html($(this).attr('name'));
            $("#select ul").fadeOut(0);
        });
        $(document).click(function (e) {//点击其他地方关闭
            e = e || window.event;
            if (e.target != $ ('#select em')[0]) {
                $("#select ul").fadeOut(0);
            }
        });
    })
</script>

  好了,以上就是部分元素的修改代码,用label可以修改更多表单元素哦!

下载地址

【七空幻音】CSS修改表单元素与伪造表单元素