TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-13 10:46:17 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix search box text being invisible in Safari

Browse Source 
Explicitly declare a transparent background color in the inline `style` declaration so the search box doesn't render white text on a white background in Safari. Remove `.bg-transparent` from the class attribute, since it doesn't exist in the built CSS file.

Explanation: for some reason (Purgecss misfire?) the CSS class `bg-transparent` does not appear in the built CSS file, so the assignment of the class to the `input` element is meaningless. The inline style declared using the `background` shortcut declaration lacks a background-color, which Chrome and Firefox interpret as a transparent background but which Safari just ignores, falling back to its default white background. This means text typed into the search field renders as white on white, effectively invisible. By explicitly declaring a transparent background color, the search box renders correctly in all three browsers (white text on black background).
This commit is contained in:
Mihira Jayasekera 2019-03-26 00:36:20 -07:00 committed by Bjørn Erik Pedersen
parent 3f21d09573
commit bca84e9147
1 changed files with 1 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
themes/gohugoioTheme/layouts/partials/site-search.html
View File

@ -1,6 +1,6 @@
<form id="site-search-form" action="" role="search">
<fieldset class="bn ma0 pa0">
<label class="clip" for="search-input">Search</label>
<input type="search" id="search-input" class="needs-js bg-left bg-transparent bn f5 input-reset lh-solid mt3 mt0-ns pl4 pv2 w5 white" placeholder="Search the Docs" name="search-input" value="" style="background: url('/images/icon-search.png') no-repeat 0 8px /16px 16px;;">
<input type="search" id="search-input" class="needs-js bg-left bn f5 input-reset lh-solid mt3 mt0-ns pl4 pv2 w5 white" placeholder="Search the Docs" name="search-input" value="" style="background: transparent url('/images/icon-search.png') no-repeat 0 8px /16px 16px;">
</fieldset>
</form>