2016-01-20 3 views
0

Это, как я есть:Как я могу изменить css ввода ["file"]?

<!-- 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: Есть два входных файла. Обычный и входной файл с идентификатором.

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;} 
+0

Это CSS –

+0

Как я могу добавить CSS на этой странице, как код? –

+2

это не CSS, это JavaScript. – sevenseacat

ответ

0

Как @Siva предложила добавить тег <style> в начало вашего html-файла. определить # в-BTN и добавить правила стиля в него, как показано ниже:

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

Вы можете добавить его в <style> тег в ваш HMTL. Для экс:

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

@ M.Gomez: То, что вы указали, - это код Javascript внутри тега