diff options
| author | bors-servo <metajack+bors@gmail.com> | 2015-10-04 12:49:26 -0600 |
|---|---|---|
| committer | bors-servo <metajack+bors@gmail.com> | 2015-10-04 12:49:26 -0600 |
| commit | 460f067b9da42cf7663f22428547b81f43ea60c1 (patch) | |
| tree | 747ce186aad78d7c11ee09b10a7eb36ed9d41c73 | |
| parent | 9eb0effaf674da0f24eb5e0ae8e290c9648598de (diff) | |
| parent | 9ed0ae4a7a4d6aec14f8d42597459b52b8e6a4d4 (diff) | |
| download | servo-460f067b9da42cf7663f22428547b81f43ea60c1.tar.gz servo-460f067b9da42cf7663f22428547b81f43ea60c1.zip | |
Auto merge of #7847 - jdm:selectstyling, r=Manishearth
Style <select multiple> appropriately.
<img width="216" alt="screen shot 2015-10-04 at 2 33 36 pm" src="https://cloud.githubusercontent.com/assets/27658/10269411/ec1b5bce-6aa4-11e5-8ce8-0f22425ea3d4.png">
<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/7847)
<!-- Reviewable:end -->
| -rw-r--r-- | resources/servo.css | 13 | ||||
| -rw-r--r-- | tests/html/select.html | 23 |
2 files changed, 32 insertions, 4 deletions
diff --git a/resources/servo.css b/resources/servo.css index fa71579187f..e0c65f86bdf 100644 --- a/resources/servo.css +++ b/resources/servo.css @@ -15,10 +15,15 @@ input[type="checkbox"]:indeterminate::before { content: "-"; } input[type="radio"]::before { display: inline-block; border: solid currentcolor 1px; content: ""; padding: 0; width: 1em; height: 1em; border-radius: 50%; text-align: center; } input[type="radio"]:checked::before { content: "●"; line-height: 1em; } -select { border-style: solid; border-width: 1px; padding: 0.25em 0.5em; border-radius: 6px; background: white; } -select::after { content: ""; display: inline-block; border-width: 5.2px 3px 0 3px; border-style: solid; border-color: currentcolor transparent transparent transparent; margin-left: 0.5em; } -option { display: none !important } -option[selected] { display: inline !important } +select { border-style: solid; border-width: 1px; background: white; } +select[multiple] { padding: 0em 0.25em; } +select:not([multiple]) { padding: 0.25em 0.5em; border-radius: 6px; } +select:not([multiple])::after { content: ""; display: inline-block; border-width: 5.2px 3px 0 3px; border-style: solid; border-color: currentcolor transparent transparent transparent; margin-left: 0.5em; } +select:not([multiple]) option { display: none !important; } +select:not([multiple]) option[selected] { display: inline !important; } +select[multiple] option { display: block !important; } +select[multiple] option[selected] { background-color: grey; color: white; } +select[multiple]:focus option[selected] { background-color: darkblue; } td[align="left"] { text-align: left; } td[align="center"] { text-align: center; } diff --git a/tests/html/select.html b/tests/html/select.html new file mode 100644 index 00000000000..83b089baa1b --- /dev/null +++ b/tests/html/select.html @@ -0,0 +1,23 @@ +<select> + <option>hi</option> + <option>hi2</option> + <option selected>hi to you too!</option> + <option>again, again!</option> + <option>and one more</option> +</select> +<br><br> +<select multiple> + <option>hi</option> + <option>hi2</option> + <option selected>hi to you too!</option> + <option selected>again, again!</option> + <option>and one more</option> +</select> +<select multiple> + <option>hi</option> + <option>hi2</option> + <option selected>hi to you too!</option> + <option selected>again, again!</option> + <option>and one more</option> +</select> +<script>document.getElementsByTagName('select')[1].focus()</script> |