Fix the input[type="search"] documentation block

Changes in README.md:
1. Remove notes about Chrome on macOS and Windows, because it's not
reproduced. See attached images. Tested on macOS 10.15 and Windows 10/7.
2. Remove notes about Safari on Windows, because it's completely
out-of-date and not supported anymore by normalize.css. Safari 5.1.7
was the last version supported by Windows XP/Vista/7.
[Safari version history](https://en.wikipedia.org/wiki/Safari_version_history#Windows)

Changes below are required to cover all cases mentioned on README.md for
Safari.

Changes in test.html:
1. Add some new styles:
    - font-family
    - background-color
2. Add the value attribute
This commit is contained in:
Siarhei Bobryk 2020-09-06 15:32:33 +03:00
parent fc091cce15
commit f65e26e08a
No known key found for this signature in database
GPG Key ID: D27ED1F4CAF5701A
2 changed files with 5 additions and 8 deletions

View File

@ -78,13 +78,10 @@ decrement button to change from `default` to `text`.
#### `[type="search"]` #### `[type="search"]`
The search input is not fully stylable by default. In Chrome and Safari on The search input is not fully stylable by default. In Safari on
OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In OSX you can't control `font`, `padding`, `border`, or `background`. Applying
Chrome and Safari on Windows you can't control `border` properly. It will apply `-webkit-appearance: textfield` addresses these issues without removing the
`border-width` but will only show a border color (which cannot be controlled) benefits of search inputs (e.g. showing past searches).
for the outer 1px of that border. Applying `-webkit-appearance: textfield`
addresses these issues without removing the benefits of search inputs (e.g.
showing past searches).
## Contributing ## Contributing

2
test.html vendored
View File

@ -431,7 +431,7 @@
<h2 class="Test-describe"><code>[type="search"]</code></h2> <h2 class="Test-describe"><code>[type="search"]</code></h2>
<h3 class="Test-it">should be styleable</h3> <h3 class="Test-it">should be styleable</h3>
<div class="Test-run"> <div class="Test-run">
<input type="search" style="border:1px solid #ADD8E6; padding:10px; width:200px;"> <input type="search" style="border:4px dashed #ADD8E6; padding:10px; width:200px; font-family:monospace; background-color:#f0f8ff" value="search query">
</div> </div>
<h3 class="Test-it">should reference inherited color</h3> <h3 class="Test-it">should reference inherited color</h3>
<div class="Test-run"> <div class="Test-run">