Следующая процедура (на mysql5) - способ выбросить пользовательские ошибки и занести их в одно и то же время:
create table mysql_error_generator(error_field varchar(64) unique) engine INNODB;
DELIMITER $$
CREATE PROCEDURE throwCustomError(IN errorText VARCHAR(44))
BEGIN
DECLARE errorWithDate varchar(64);
select concat("[",DATE_FORMAT(now(),"%Y%m%d %T"),"] ", errorText) into errorWithDate;
INSERT IGNORE INTO mysql_error_generator(error_field) VALUES (errorWithDate);
INSERT INTO mysql_error_generator(error_field) VALUES (errorWithDate);
END;
$$
DELIMITER ;
call throwCustomError("Custom error message with log support.");
Используйте это, это будет работать, но с IE10 + и для FF:
Ваш CSS должен выглядеть следующим образом:
select.desktopDropDown::-ms-expand {
display: none;
}
Подробнее о ::ms-expand
.
Затем для остальных:
select.desktopDropDown {
outline : none;
overflow : hidden;
text-indent : 0.01px;
text-overflow : '';
background : url("../img/assets/arrow.png") no-repeat right #666;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
Примечание : I жестко закодированный путь "../img/assets/arrow.png"
в качестве фона.
Это должно хорошо работать в IE, Firefox и Opera.
Для Fx я использую -moz-appearance: checkbox-container
, который хорошо работает.
Итак, всего этого достаточно для вас:
select.desktopDropDown {
appearance: none;
-webkit-appearance: none;
-moz-appearance: checkbox-container;
border-style: none;
}
select.desktopDropDown::-ms-expand {
display: none;
}
Примеры голых костей:
select::-ms-expand {
display: none;
}
select {
-moz-appearance: none;
appearance: none;
text-overflow: ''; /* this is important! */
}
мы можем создать кастом, используя css. протестировано на IE10, Mozilla и браузере Chrome ...
Пример работы, как показано ниже:
.customSelect {
position: relative;
}
/* IE11 hide hacks*/
select::-ms-expand {
display: none;
}
.customSelect:after {
content: '<>';
font: 17px "Consolas", monospace;
color: #333;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 11px;
/*Adjust for position however you want*/
top: 18px;
padding: 0 0 2px;
border-bottom: 1px solid #999;
/*left line */
position: absolute;
pointer-events: none;
}
.customSelect select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Add some styling */
display: block;
width: 100%;
height: 50px;
float: none;
margin: 5px 0px;
padding: 0px 24px;
font-size: 16px;
line-height: 1.75;
color: #333;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
-ms-word-break: normal;
word-break: normal;
}
<div class="customSelect">
<label>
<select>
<option selected> Select Box </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Last long option</option>
</select>
</label>
</div>
На самом деле этот трюк в основном необходим для IE10 +, где стрелки выполнены в стиле Metro в Windows 8, даже в Windows 7. Хотя пользователи Windows 8 должны быть использованы в этом стиле, потому что он используется в ОС. В любом случае, я бы порекомендовал вместо использования:
display: none;
Использовать:
visibility: hidden;
Потому что, по крайней мере в IE, первое вызывает наложение синей линии выбранного элемента стрелка раскрывающегося списка, когда выделение сфокусировано, а последнее - нет.