如何改變輸入[「文件」]的CSS？

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

正如@Siva建議的那樣，在你的html文件的頭部添加<style>標籤。 定義＃在-BTN並添加樣式規則成其爲波紋管所示：

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

Answer 2

您可以在HMTL添加它裏面<style>標籤。對於前：

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

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.