Question

这就是我的方式：

<!-- Files button -->
        <span class="new">+ Añadir archivos</span>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#in-btn").hover(function()
                {
                    $(".new").addClass("blue-blue");
                });

                $("#in-btn").mouseleave(function()
                {
                    $(".new").removeClass("blue-blue");
                });
            });

          $('#in-btn').change(function(){
            var files = $(this)[0].files;
            var text= " Archivos añadidos";
            if(files.length > 250){
                alert("250 archivos máximos");
            }else{
                var num_archivos = files.length + text;
                $("#num_archivos").text(num_archivos);
            }
         });

        </script>

不关心javascript，这是另一回事。我用它来发送包含所选文件数量的短信。

这是我的css：有两个输入文件。正常的，带ID的输入文件。

 input[type="file"]{
position: relative;}

#in-btn{
position: absolute;
opacity: 0;
cursor: pointer;
border: 1px solid;
z-index: 100;
width: 15%;
height: 25px;}

.new{
position: relative;
background: #526ed9;
padding: 10px 25px;
color: #fff;
cursor: pointer;
border-radius: 50px;
font-size: 14px;}

.new:hover{
background: #2d4ecb;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;}

.blue-blue{
background: #2d4ecb;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;}

Answer 1

您可以在HMTL中的<style>标记内添加它。例如：

<style>
body {background-color:lightgrey;}
h1   {color:blue;}
p    {color:green;}
</style>

Answer 2

也许你应该分开Jquery和Html代码...它应该可以正常工作。将所有Jquery放入js文件中，而不是放在Html文件

中

Answer 3

正如@Siva建议的那样，在html文件的头部添加<style>标记。定义#in-btn并将样式规则添加到其中，如下所示：

<style>
#in-btn {
display:block;
background-color: #FFF;
padding: 5px;
...
}
</style>

我如何更改输入[“文件”]的CSS？

3 个答案: