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

resources: Improve the look of form widgets a bit.

Browse source 
* Don't display unselected `<option>` elements inside `<select>`
  dropdowns.

* Use CSS triangles to give `<select>` dropdowns a down arrow in order
  to make them look as intended.

* Use borders instead of `( )` and `[ ]` for radio buttons and check
  boxes, respectively.

Improves facebook.com and IMDB.
This commit is contained in:
Patrick Walton 2015-08-21 17:19:36 -07:00
parent d48f6ffbad
commit 4e0fb1ed61
2 changed files with 10 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

15
resources/servo.css
View file

@ -9,11 +9,16 @@ input[type="hidden"] { display: none !important }
input[type="checkbox"],
input[type="radio"] { font-family: monospace !important; border: none !important; background: transparent; }
input[type="checkbox"]::before { content: "[ ]"; padding: 0; }
input[type="checkbox"]:checked::before { content: "[✓]"; }
input[type="checkbox"]:indeterminate::before { content: "[-]"; }
input[type="radio"]::before { content: "( )"; padding: 0; }
input[type="radio"]:checked::before { content: "(●)"; }
input[type="checkbox"]::before { display: inline-block; border: solid currentcolor 1px; content: ""; padding: 0; width: 1em; height: 1em; text-align: center; }
input[type="checkbox"]:checked::before { content: "✓"; }
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 }
td[align="left"] { text-align: left; }
td[align="center"] { text-align: center; }