Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-06 16:45:39 +00:00
Code Issues Projects Releases Packages Wiki Activity

Auto merge of #7847 - jdm:selectstyling, r=Manishearth

Browse source 
Style <select multiple> appropriately.

<img width="216" alt="screen shot 2015-10-04 at 2 33 36 pm" src="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 -->
This commit is contained in:
bors-servo 2015-10-04 12:49:26 -06:00
commit 460f067b9d
2 changed files with 32 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

13
resources/servo.css
View file

@ -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; }

23
tests/html/select.html Normal file
View file

@ -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>