Как стилизовать < выберите > выпадающий только с CSS?
Основываясь на ответе @Mahomedalid, я сделал некоторые улучшения для поддержки «выберите все столбцы, кроме некоторых в mysql»
SET @database = 'database_name';
SET @tablename = 'table_name';
SET @cols2delete = 'col1,col2,col3';
SET @sql = CONCAT(
'SELECT ',
(
SELECT GROUP_CONCAT( IF(FIND_IN_SET(COLUMN_NAME, @cols2delete), NULL, COLUMN_NAME ) )
FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME = @tablename AND TABLE_SCHEMA = @database
),
' FROM ',
@tablename);
SELECT @sql;
Если у вас много колонок, используйте этот sql для изменения group_concat_max_len
SET @@group_concat_max_len = 2048;
4 ответа
Да. Вы можете стилизовать любой элемент HTML по его имени тега, например:
select {
font-weight: bold;
}
Конечно, вы также можете использовать класс CSS для его стилизации, как и любой другой элемент:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
Элемент выбора и его раскрывающееся меню сложно стилизовать.
атрибуты стиля для элемента выбора Криса Хейлмана подтверждают то, что сказал Райан Доэри в комментарии на первый ответ:
«Элемент select является частью операционная система, а не браузер Chrome. Поэтому очень ненадежен к стилю, и не обязательно пробовать anyway."
tags can be styled through CSS just like any other HTML element on an HTML page rendered in a browser. Below is an (overly simple) example that will position a select element on the page and render the text of the options in blue.
Example HTML file (selectExample.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
Example CSS file (selectExample.css):
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
select {
outline: 0;
overflow: hidden;
height: 30px;
background: #2c343c;
color: #747a80;
border: #2c343c;
padding: 5px 3px 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 10px;
}
select option {border: 1px solid #000; background: #010;}