How to make custom CSS for search in WP?

HTML & CSS
1

How to modify CSS for the default WP search input?

<?php get_search_form(); ?>
2

Hi, if you check the DOM, you can see the code generated by WP:

<form role="search" method="get" class="search-form" action="">
    <label>
        <span class="screen-reader-text">Search by:</span>
        <input type="search" class="search-field" placeholder="Search" value="" name="s" />
    </label>
    <input type="submit" class="search-submit" value="Search" />
</form>

You can then use the classes to customize the search form.

1 Like
3

Thank you for the information. Can you give me path to DOM?
I have seen some resources: https://wpengine.com/resources/how-to-manipulate-dom-in-wordpress-with-jquery/

4

Just open your browser and activate the developer tools.

Firefox: https://developer.mozilla.org/en-US/docs/Tools
Chrome: https://developers.google.com/web/tools/chrome-devtools/open

6

I have done and validated. I need to control responsive design but HTML can not be found.

<form role="search" method="get" class="search-form" action="">
				<label>
					<span class="screen-reader-text">Search for:</span>
					<input type="search" class="search-field" placeholder="Search …" value="" name="s">
				</label>
				<input type="submit" class="search-submit" value="Search">
			</form>

I can not detect where is pulled such HTML. I could manually set CSS for such class but can be modified HTML with my own class? Example: class=“search-submit” replaced with class=“button-search-submit”

7

Of course you can change or add your classes.

However, you can use the classes already entered to write your CSS. And you can also edit HTML, as long as the vital parts of the form remain.

8

I can not detect where is pulled such HTML. Can you give me steps as I have checked Developer tool but source is not found.

9

Usually you just need to open the web page and check the HTML. However, you can also consult the official documentation: https://developer.wordpress.org/reference/functions/get_search_form/.

2 Likes
10

I have checked those folders. Functions are placed inside wp-includes/general-template.php
Is it any other folder inside WP as modified class inside PHP code will not be detected or I have made mistake…

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.