Кнопка загрузки, imput, можно ли переделать в обычный div

L
На сайте с 18.02.2012
Offline
83
681

Здравствуйте, кнопка не совсем нормально работает, как то мерцает когда проводишь по ней мышкой не всегда нормально меняет цвет при наведении.

Реально ли как то переделать инпут кнопку на обычный div ну и что бы она срабатывала, а может и не див, в этом не шарю.

Сама кнопка:


<input type="button" id="upload" title="Загрузить основную фотографию" name="submit" class="addzagryzkafoto" value="ЗАГРУЗИТЬ ОСНОВНУЮ ФОТОГРАФИЮ">
Geers
На сайте с 12.04.2011
Offline
487
#1

А какой код css у id="upload" и class="addzagryzkafoto"?

L
На сайте с 18.02.2012
Offline
83
#2
Geers:
А какой код css у id="upload" и class="addzagryzkafoto"?


input.addzagryzkafoto {
text-transform: uppercase;
font-size: 14px;
color: #fff;
cursor: pointer;
font-weight: bold;
border: 1px solid #F16499;
padding-right: 5px;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background: rgb(240,97,151); /* Old browsers */
background: -moz-linear-gradient(top, rgba(240,97,151,1) 0%, rgba(225,58,121,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,97,151,1)), color-stop(100%,rgba(225,58,121,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f06197', endColorstr='#e13a79',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
-moz-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
-o-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
-khtml-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
}
input.addzagryzkafoto:hover {
border: 1px solid #F16499;
background: rgb(255, 220, 239);
background: -moz-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: -webkit-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: -o-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: -ms-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: linear-gradient(0deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
color: #000;
}


#upload{
height: auto;
}

Я тут на одном сайте увидел что так сделано как то.

<div class="ibtn ibtn-blue" onclick="$('#file-of-image').click();" id="pc-upload-btn">Загрузить с компьютера </div>

Вот и подумал что импут может то же как то так переделать можно.

Geers
На сайте с 12.04.2011
Offline
487
#3

Вы видите чем у вас отличается код input.addzagryzkafoto от input.addzagryzkafoto:hover?

Конечно будет мерцать.

А именно отличие в этом:

padding-right: 5px;

padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 14px;
color: #fff;
font-weight: bold;
L
На сайте с 18.02.2012
Offline
83
#4
Geers:
Вы видите чем у вас отличается код input.addzagryzkafoto от input.addzagryzkafoto:hover?
Конечно будет мерцать.

А именно отличие в этом:
padding-right: 5px;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 14px;
color: #fff;
font-weight: bold;

да вижу, при наведении мышкой он меняет, но он как то плохо срабатывает ! мышка дергается когда ведешь по кнопке.

если див делаю то норма, тут дело не в этом, тут в инпуте этом ! можно ли как то кнопку переделать что бы она работала но была не инпут.

---------- Добавлено 09.06.2014 в 22:02 ----------

Загрузчик фото на фаремвор кохане.

Кусок кода загручика, где стили то же ! может тут что не так.



/**
* Creates invisible file input above the button
*/
_createInput : function(){
var self = this;
var input = d.createElement("input");
input.setAttribute('type', 'file');
input.setAttribute('name', this._settings.name);
var styles = {
'position' : 'absolute'
,'width': '220px'
,'height': '30px'
,'fontSize': '14px'
,'opacity': 0
,'cursor': 'pointer'
,'display' : 'none'
,'zIndex' : 2147483583 //Max zIndex supported by Opera 9.0-9.2x
// Strange, I expected 2147483647
};
for (var i in styles){
input.style = styles;
}

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий