Question

Как изменить кнопку "Выберете файл" в добавлении материала. Нужно поменять цвет и в место надписи  "Выберете файл" что бы было  "Загрузить фото"??????????????????????

 

 

 

Answer 1

Да, можно. Я сделал это следующим методом:

input[type=file]:before {
    content: "Выбрать файл";
    margin: 0 5px;
    padding: 5px;
    top: 0px;
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #fff;
    background-image: -webkit-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: -moz-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: -o-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: -ms-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: linear-gradient(to top, rgba(85,85,85,.1), rgba(255,255,255,.1));
    box-shadow: inset 0 0 1px #fff;
    text-shadow: 0 1px 0 #fffcf6;
    border-radius: 3px;
    cursor: pointer;
    visibility:visible;
    position: relative;
}

вместо текста Выбрать файл можете написать свой текст для кнопки.

Comments

а куда этот код вставлять???????????

---

Александр Пушной,

в таблицу стилей CSS вашего сайта - http://www.oedo.ru/panel/?a=tmpl;m=3;t=3 в самый низ

---

Yuri_Geruk,

 теперь не понятно загружена ли фото или нет

 

 

 

 

 

 

 

---

Yuri_Geruk,

Хотелось бы как нибудь так сделать

 

---

Александр Пушной,

так не получится, так лишь для блога и все

---

Yuri_Geruk,

 теперь не понятно загружена ли фотка или нет

 

 

до этого было так 

 

 

 

 

 

---

Александр Пушной,

можно сделать как-то так:

input[id*="fln"] {position:relative;}

input[type=file]:before {
   content: "Выбрать файл";
    width:110px;
    padding: 5px;
    top: -3px;
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #fff;
    background-image: -webkit-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: -moz-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: -o-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: -ms-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: linear-gradient(to top, rgba(85,85,85,.1), rgba(255,255,255,.1));
    box-shadow: inset 0 0 1px #fff;
    text-shadow: 0 1px 0 #fffcf6;
    border-radius: 3px;
    cursor: pointer;
    visibility:visible;
    position: absolute;
}

вместо стилей выше установить эти

либо:

input[id*="fln"] {color:#000!important; position: relative; border: 0px !important; outline: none;}

input[type="file"]:before {
   content: "Выбрать файл";
    margin: 0 5px;
    padding: 5px 11px 5px 11px;
    top: 0px;
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #fff;
    background-image: -webkit-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: -moz-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: -o-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: -ms-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: linear-gradient(to top, rgba(85,85,85,.1), rgba(255,255,255,.1));
    box-shadow: inset 0 0 1px #fff;
    text-shadow: 0 1px 0 #fffcf6;
    border-radius: 3px;
    cursor: pointer;
    visibility:visible;
    position: absolute;
    top:4px;
    left:-1px;
}

мне подошел вариант 1