https://www.makerlab-electronics.com/
it should have a color when I select the text
Topic summary
Goal: make the selected (highlighted) text in the search input visibly blue when using Ctrl+A or mouse selection.
What was proposed:
- Multiple replies first suggested changing the input text color via CSS in base.css (e.g., selectors like search input or input#Search-In-Modal with color: blue !important). This affects normal text color, not the selection highlight.
- After clarification that the issue is the selection visibility, one reply provided a relevant approach using the ::selection pseudo-element on input#Search-In-Modal to set background-color: blue and color: white, added in theme.liquid or base.css near the end of the file.
Notes:
- One participant reported not finding a solution before the ::selection suggestion.
- Another late reply again recommended only changing the text color, which doesn’t address selection styling.
Outcome/Status:
- The ::selection CSS is the only suggestion that targets highlighted text. The original poster did not confirm whether it solved the issue, so the resolution remains unverified and the discussion appears open.
Hi @niceeee
Please add this code to bottom of your base.css file to change that text to blue
search__input.field__input { color: blue !important; }
@niceeee
Go to Online Store>Edit Code> Find Base.css file on Bottom Paste code
input#Search-In-Modal {
color: blue!important;
}
I mean when you ctrl + a or select the word as you can see it is not visible. can you change it to blue
1 Like
Ahh, I got it, tried to find the solution but no luck!
Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above tag
input#Search-In-Modal::selection{
background-color:blue;
color:white;
}
If I managed to help you then, don’t forget to Like it and Mark it as Solutions.
Hi @niceeee
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
form.search.search-modal__form input#Search-In-Modal {color: blue !important;}
Hope that my solution works for you.
Best regards,
Henry | PageFly