Четверг, 06 Декабря 2012 10:49

Стилизация input type file для WebKit

Written by 
Оцени эту запись
(11 Голоса)

Элемента input типа file является элементом управления, позволяющим загрузить файл.

 

 

<input type="file">

 

Стилизация input type file для WebKit

 

Это стандартный элемент со стандартной кнопкой "Выберите файл". Но зная особенные стили для браузеров WebKit, его можно стилизировать.

 

Этот элемент состоит из двух частей - внешней оболочки и кнопки, которые по умолчанию умеют такие стили:

 

 

input[type="file"] {
        -webkit-appearance: initial;
        padding: initial;
        background-color: initial;
        border: initial;
        -webkit-box-align: baseline;
        color: inherit;
        text-align: start !important;
}
input[type="file"]::-webkit-file-upload-button {
        -webkit-appearance: push-button;
        -webkit-user-modify: read-only !important;
        white-space: nowrap;
        margin: 0;
        font-size: inherit;
}

 

Зная это, стили можно изменить. Основным свойством у этих элементов является -webkit-appearance, которое задает основную стидлизацию стандартных элементов. Потому, первым делом, нужно данному свойству задать значение none. Далее можно с элементами работать, как с обычными.

 

Я сделала такой код:

 

<input type="file">
<style>
        input[type="file"] {
            -webkit-appearance: none;
            background-color: #8a2be2;
            border: 1px solid blue;
            border-radius: 10px;
            padding: 4px 0;
            color: lightblue;
            width: 300px;
            vertical-align: middle;
            -webkit-box-shadow: 0px 0px 2px 2px blue;
        }
        input[type="file"]::-webkit-file-upload-button {
            -webkit-appearance: none;
            margin: -4px;
            font-size: 12px;
            background-image: -webkit-linear-gradient(top, blue, #8a2be2, blue);
            border-radius: 10px;
            color: lightblue;
            padding: 5px 10px;
            border: 1px solid blue;
            font-weight: bold;
            width: 130px;
        }
</style>
 
 
И получила такой результат:
 
 

 
 
 

Additional Info

Комментарии  

 
0 #1 Алексей 28.12.2014 19:24
Спасибо, пригодилось :) Буду теперь использовать!
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов