rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

overhaul custom selects with latest from primer, shoutout

Browse Source
This commit is contained in:
Mark Otto 2015-08-18 19:26:18 -07:00
parent 15b7ce59df
commit 58d1297fcb
2 changed files with 38 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/components/forms.md
View File

@ -655,35 +655,18 @@ Custom checkboxes and radios are inline to start. Add a parent with class `.c-in
### Select menu
Similar to the checkboxes and radios, we wrap the `<select>` in a `<label>` as a semantic wrapper that we can generate custom styles on with CSS's generated content.
Custom `<select>` menus need only a custom class, `.c-selecct` to trigger the custom styles.
{% example html %}
<label class="select">
<select>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</label>
<select class="c-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{% endexample %}
The `<select>` has quite a few styles to override and includes a few hacks to get things done. Here's what's happening:
- The `appearance` is reset to `none` for nearly all styles to correctly apply across modern browsers (meaning not IE9).
- The `:-moz-focusring` is overridden so that on focus there's no inner border in Firefox.
- The arrow is hidden in Firefox with a media query hack. (There's a [longstanding open bug](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a native method of addressing this.)
- The arrow is hidden in IE10+ with a simple selector.
- The arrow is hidden in IE9 with a separate media query hack which generates another pseudo-element to literally mask it. Not ideal, but doable.
**Heads up!** This one comes with some quirks right now:
- `select[multiple]` is currently currently **not supported**.
- Clickability is limited in IE9.
- Firefox's dropdown of `option`s looks rather ugly.
- The custom caret is unable to receive the selected state's `color`.
Any ideas on improving these are most welcome.
Custom selects degrade nicely in IE9, receiving only a handful of overrides to remove the custom `background-image`. **Multiple selects (e.g., `<select multiple>`) are not currently supported.**
### File browser

128
scss/_custom-forms.scss
View File

@ -123,115 +123,47 @@
// Select
//
// Replaces the browser default select with a custom one.
// Replaces the browser default select with a custom one, mostly pulled from
// http://primercss.io.
.select {
position: relative;
.c-select {
display: inline-block;
color: #555;
max-width: 100%;
padding: .375rem 1.75rem .375rem .75rem;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
background-size: 8px 10px;
border: 1px solid $input-border;
> select {
display: inline-block;
width: 100%;
padding: .5rem 2.25rem .5rem 1rem;
margin: 0;
line-height: 1.5;
color: #555;
cursor: pointer;
background-color: #eee;
border: 0;
border-radius: .25rem;
outline: 0;
-webkit-appearance: none;
appearance: none;
// Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus {
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
// IE9 hacks to hide the background-image and reduce padding
padding-right: .75rem \9;
background-image: none \9;
// Undo the Firefox inner focus ring
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
}
&:active {
color: #fff;
background-color: #0074d9;
}
// Hide the arrow in IE10 and up
&::-ms-expand {
display: none;
}
&:focus {
outline: none;
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
}
// Dropdown arrow
&:after {
position: absolute;
top: 50%;
right: 1.25rem;
display: inline-block;
width: 0;
height: 0;
margin-top: -.15rem;
pointer-events: none;
content: "";
border-top: .35rem solid;
border-right: .35rem solid transparent;
border-bottom: .35rem solid transparent;
border-left: .35rem solid transparent;
// Hides the default caret in IE11
&::-ms-expand {
opacity: 0;
}
}
// Hover state
.select select {
@include hover {
background-color: #ddd;
}
}
.c-select-sm {
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px;
// Media query to target Firefox only
@-moz-document url-prefix() {
// Firefox hack to hide the arrow
.select select {
padding-right: 1rem;
text-indent: 0.01px;
text-overflow: "";
}
// <option> elements inherit styles from <select>, so reset them.
.select option {
background-color: #fff;
}
}
// IE9 hack to hide the arrow
@media screen and (min-width:0\0) {
.select select {
z-index: 1;
padding: .5rem 1.5rem .5rem 1rem;
}
.select:after {
z-index: 5;
}
.select:before {
position: absolute;
top: 0;
right: 1rem;
bottom: 0;
z-index: 2;
display: block;
width: 1.5rem;
content: "";
background-color: #eee;
}
.select select {
@include hover-focus-active {
color: #555;
background-color: #eee;
}
&:not([multiple]) {
height: 26px;
min-height: 26px;
}
}