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

表单元素修改起来其实也不是很难,一般都是有两种办法,一是用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)

  

<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)

  

  

<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修改表单元素与伪造表单元素