Fix search input text color visibility

- Add search-input class to both desktop and mobile search inputs
- Set dark text color (#212529) for search input visibility
- Add placeholder styling with lighter color (#6c757d)
- Compile SCSS to CSS with new search input styles

Resolves: White text on white background issue in search fields
This commit is contained in:
Edwin Noorlander 2025-11-22 18:52:32 +01:00
parent 04a9406f14
commit 26f382c41d
4 changed files with 13 additions and 4 deletions

View File

@ -8,7 +8,7 @@
<!-- Desktop search and language -->
<div class="d-none d-lg-flex ms-auto align-items-center">
<form class="d-flex me-3" method="GET" action="">
<input class="form-control me-2" type="search" name="search" placeholder="{{t_search_placeholder}}" value="{{search_query}}">
<input class="form-control me-2 search-input" type="search" name="search" placeholder="{{t_search_placeholder}}" value="{{search_query}}">
<button class="btn btn-outline-light" type="submit">{{t_search_button}}</button>
</form>
@ -43,7 +43,7 @@
<div class="collapse navbar-collapse d-lg-none" id="mobileSearch">
<div class="container-fluid px-0">
<form class="d-flex px-3 pb-3" method="GET" action="">
<input class="form-control me-2" type="search" name="search" placeholder="{{t_search_placeholder}}" value="{{search_query}}">
<input class="form-control me-2 search-input" type="search" name="search" placeholder="{{t_search_placeholder}}" value="{{search_query}}">
<button class="btn btn-outline-light" type="submit">{{t_search_button}}</button>
</form>
</div>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -271,6 +271,15 @@ footer {
max-width: 300px;
}
/* Search input text color */
.search-input {
color: #212529 !important;
}
.search-input::placeholder {
color: #6c757d !important;
}
/* Card styling */
.card-title a {
text-decoration: none;