常用的按钮脚本提交数据 上传按钮更改样式

  通用的页面翻页css:

<div class="page qcfd" style="display: inline-block;">{$page}div>


<style type="text/css">
    .page{text-align: center;}
        .page .num,.page .prev,.page .next,.page .end,.page .first{
            width: 45px;
            height: 40px;
            border: 1px solid #EBEBEB;
            margin-left: -1px;
            color: #8a8a8a;
            display: inline-block;
            line-height: 40px;
            float: left;
            font-size: 15px;
            text-decoration: none;
            margin: 0 2px;
            border-radius: 6px;
        }
        .page .current{
            width: 45px;
            height: 40px;
            border: 1px solid #EBEBEB;
            margin-left: -1px;
            display: inline-block;
            line-height: 40px;
            float: left;
            font-size: 15px;
            text-decoration: none;
            margin: 0 2px;
            border-radius: 6px;
            background-color: #222A35;
            color: #fff;
            border-color: #EBEBEB;
            position: relative;
            z-index: 1;
        }
        style>

 上传按钮更改样式:a标签下面嵌套一个input:

<style type="text/css">
        .file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
    style>






<a href="" class="file" >
                        <div id="xiao">请选择您要上传的简历(可上传WORD、PDF、PPT)div>                    
                        <input  type="file" id="file" name="file" onchange="checkFileExtension(this);" /> 
                    a>

                    <script type="text/javascript">
                        function checkFileExtension(file) {  
                        var validExtensions = new Array(".doc", ".docx",".pdf",".ppt");  
                        var fileExtension = file.value;  
                        var xiaohe = file.value;
                       
                        fileExtension = fileExtension.substring(fileExtension.lastIndexOf('.'));  
                        if (validExtensions.indexOf(fileExtension) < 0) {  
                          alert("只能上传 " + validExtensions.toString() + " 后缀文件.");  
                          file.value = "";  
                          return false;  
                        } else {  
                            document.getElementById('xiao').innerText=xiaohe;
                            return true;  

                        }  
                    }  
                    script>

 

转载于:https://www.cnblogs.com/xiaohe520/articles/11201963.html

你可能感兴趣的:(常用的按钮脚本提交数据 上传按钮更改样式)