How override default styles for a select element multiple
Question
For a select element multiple I want to remove the background color of the selected option as I'm indicating the selection with the box before each option. The intention is give a checkbox style to a select multiple element.
Why using a select multiple? I'm working in a Angular App and should be useful style a select multiple as a collection of checkboxes. Doing that I will be able to use angular validations, ng-options, etc. I can build the same interface with inputs type checkbox but that imply a lot more of code for the same piece of functionality.
.form-group{ margin: 10px 0 0 20px; } select[multiple]{ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; overflow: hidden; box-shadow: none; } select[multiple].form-control{ padding: 6px 0 6px 6px; } select[multiple] option{ padding: 5px 0 7px 0; } select[multiple]:focus{ box-shadow: none; } select[multiple]:focus option:checked{ background-color: white; } select[multiple] option:before, select[multiple] option:after{ content: ""; display: inline-block; position: absolute; width: 17px; height: 17px; left: 0; margin-left: 12px; border: 1px solid #ccc; border-radius: 3px; background-color: #fff; } select[multiple]:focus option:checked:before{ background: white; } select[multiple] option:checked:before{ background-color: #319DB5; border-color: #2c8ca1; } select[multiple] option:checked:after{ background-color: gray; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class="container"> <div class="form-group"> <label for="someOptions">Select multiple</label> <select multiple="multiple" class="form-control" size="10" name="options" required="required" id="someOptions"> <option label="Option 1" value="number:1">Option 1</option> <option label="Option 2" value="number:2">Option 2</option> </select> </div> </div> </body>
1 answers
solution1
0 2016-11-16 18:02:01
我想你在找这个
select[multiple] option:checked { background: none; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.