Стилизация кнопки «загрузить файл» в contact form 7

Стилизация кнопки «загрузить файл» в contact form 7

Довольно тривиальная задача, но у многих начинающих веб-дизайнеров может вызвать массу проблем. Я привожу небольшой пример кода для стилизации кнопки загрузки:

input[type="file"] {
    margin-top: 2px;
    line-height: 1;
    vertical-align: middle;
}

input[type="file"]::-webkit-file-upload-button {
    font-size: 12px;
}

Для того, чтобы изменить внешний вид кнопки достаточно внести свои css правила во в этот блок:

input[type="file"]::-webkit-file-upload-button { font-size: 12px; }

Например как у меня:

input[type="file"]::-webkit-file-upload-button {
    font-size: 12px;
    background:#f9765c;
    border:none;
    padding:12px;
    cursor:pointer;
    color:#fff;
    border-radius: 3px
}

И так я добавил эффект при наведении(hover):

input[type="file"]::-webkit-file-upload-button:hover {
    font-size: 12px;
    background:#ffae5f;
    border:none;
    padding:12px;
    cursor:pointer;
    color:#fff;
    border-radius: 3px
}

 

Статья была полезной? Поделитесь с друзьями!
Метки: ,