Placeholder Text on Search

[Taylor Wirth]

Hello! Does anyone know how to change the placeholder text color for the default search widget? I have tried updating my Theme, injecting CSS into the widget, everything... any guidance would really help. Thanks!

[Rajesh_Singh]

@Taylor Wirth 

1. Right-click on the search field and select "Inspect" or "Inspect Element" from the context menu.

2. In the developer tools window, locate the CSS styles associated with the search field.

3. Look for the CSS selector that targets the search field placeholder text. This may be something like ::placeholder or ::-webkit-input-placeholder.

[Taylor Wirth]

Hey @Rajesh_Singh ! Thanks for your response. This is what I did today, and I am able to manipulate the element through the DOM. When I copy this CSS into the widget though I do not get the expected outcome.

[Rajesh_Singh]

If you're able to manipulate the element through the DOM but not seeing the expected outcome when adding the CSS into the widget, it's possible that the CSS you're using is being overridden by another CSS rule with higher specificity or a different ordering in the stylesheet.

Try adding !important after your CSS rule to give it higher priority

If this still doesn't work, you may need to use more specific CSS selectors to target the placeholder text in the search field. You could try using the widget ID or class name to make your selector more specific, 

Just replace mySearchWidget with the ID or class name of your search widget.

[AnveshKumar M]

Hi @Taylor Wirth ,

You can achieve this by using custom CSS, follow along to achieve this. For this you have to clone two widgets,

1. Typeahead Search (typeahead-search):

Open widget editor and select the widget as Typeahead Search (typeahead-search) and once the editor is opened click on clone widget and give the new widget name as you want, I gave it as Typehead Search 2 (typehead_search_2) and save,

Then open the Typehead Search 2 (typehead_search_2) in Widget editor and in the CSS editor add the following CSS at the bottom of existing code.

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}

2. Homepage Search:

Now clone the Homepage Search widget and give the name as Homepage Search Custom and save, then open the Homepage Search Custom in widget editor and modify the Server Script to below one (Just modify the first parameter of $sp.getWidget('typehead_search_2', options); to ID (typehead_search_2) of the Typehead Search 2 widget created in first step.).

var aisEnabled = $sp.isAISearchEnabled();

if (aisEnabled)
	data.typeAheadSearch = $sp.getWidget('typehead_search_2', options);
else
	data.typeAheadSearch = $sp.getWidget('typehead_search_2', options.typeahead_search);

var aisEnabled = $sp.isAISearchEnabled();

3. Index Page:

Now open Home (index) portal page in page designer and delete the OOB Homepage Search Widget and drag and drop the Homepage Search Custom widget we created in Step-2. Then click on edit (pencil) icon in the widget and add Title (How can we help?) and PlaceHolder ({ title: 'How can we help?', size: 'lg', color: 'default' }) text as shown in the image below and save.

Thanks,

Anvesh