This tutorial will guide you how to precisely control the style and position of the Elementor search form through custom CSS. You'll learn how to remove the default borders, outlines, and click effects, and center the form horizontally to create a search component that meets design requirements and is visually clean.

When using Elementor to build pages, we often need to perform deeper style customization of the built-in widgets to meet specific design needs. Elementor search form widgets come with borders, outlines on click, and specific background styles by default, which sometimes don’t match the overall website style. This tutorial details how to remove these default styles and center the search form through custom CSS.

1. Understand custom CSS for Elementor widgets

Elementor allows users to add “Custom CSS” in the Advanced tab of every widget. Here, the selector keyword represents the root HTML element of the current widget. This means that you can target and modify the style of the widget and the elements inside it directly through the selector without having to write complex global CSS selectors.

When default Elementor styles or theme styles override your intended effect, custom CSS combined with !important rules is an effective way to resolve the conflict.

2. Remove default styles and customized appearances

Elementor search forms usually contain a container, an input box, and a submit button. We will style these elements individually.

2.1 Clear form container background

The search form may have a default background color. In order to make it transparent or set to a specified color, we need to position its container.

 selector .elementor-search-form__container {
    background-color: transparent !important; /* Set the background to transparent*/
    /* If you need other colors, such as white: background-color: #fff !important; */
}

!important ensures that this rule takes precedence over any other background color settings.

2.2 Customize the input box style

The input box is where users enter search keywords, and its default borders, outlines, and click effects often need to be removed or modified.

 selector input.elementor-search-form__input {
    background-color: #fff; /* Set the background of the input box to white*/
    border: none !important; /* Remove all borders*/
    border-radius: 0px !important; /* Remove rounded corners and set to right angles*/
    outline: none !important; /* Remove the outline when clicked (focused) */
    box-shadow: none !important; /* Remove the shadow effect when clicked (focused) */
    /* margin-right: 20px; */ /* If you need spacing on the right side of the input box, you can adjust it yourself*/
}

Here we use a more specific selector input.elementor-search-form__input to ensure that it only affects the input box of the search form. outline: none and box-shadow: none are essential to remove visual feedback on click.

2.3 Adjust submit button style (optional)

If your search form contains a submit button and you want to style it as well, such as removing the border or changing the background.

 selector button.elementor-search-form__submit {
    border: none !important; /* Remove button border*/
    background-color: transparent !important; /* Set the button background to be transparent*/
    /* color: #000; */ /* Example: Set button text color */
    /* padding: 10px 15px; */ /* Example: adjust button padding*/
}

Please adjust the button style according to your actual needs.

3. Implement central positioning of the search form

Centering the search form widget horizontally is a common layout requirement. We can achieve this through Flexbox layout.

 selector {
    display: flex; /* Set the widget root element as the Flex container*/
    justify-content: center; /* Center its internal content (i.e. search form) horizontally */
    width: 100%; /* Make sure the widget occupies the full width of its parent container so that centering is effective*/
}

By setting the widget's root element as a Flex container and applying justify-content: center, we are able to easily center its content horizontally. width: 100% is key, it ensures that the Flex container has enough space to perform the centering operation.

4. Complete CSS code examples and applications

Combine all the above CSS code and paste it into the Advanced -> Custom CSS area of ??the Elementor search form widget.

 /* 1. Clear the form container background*/
selector .elementor-search-form__container {
    background-color: transparent !important;
}

/* 2. Customize the input box style: remove borders, outlines and click effects*/
selector input.elementor-search-form__input {
    background-color: #fff;
    border: none !important;
    border-radius: 0px !important;
    outline: none !important;
    box-shadow: none !important;
    /* margin-right: 20px; */ /* Adjust the input box spacing as needed */
}

/* 3. Adjust submit button style (optional) */
selector button.elementor-search-form__submit {
    border: none !important;
    background-color: transparent !important;
    /* color: #000; */
}

/* 4. Implement horizontal centering of the search form*/
selector {
    display: flex;
    justify-content: center;
    width: 100%;
}

Notes and Summary

• Use of !important : !important rules can force the application of styles, but excessive use may make CSS code difficult to maintain and debug. It is recommended to only use it if you really need to override the Elementor or theme's default styles.
• Browser Developer Tools : Learn to use the Browser Developer Tools (press F12) to inspect the CSS classes and structure of Elementor elements, which will greatly help you write more precise custom CSS.
• Responsive design : After adjusting the style on the desktop, be sure to check the display effect on different devices such as tablets and mobile phones, and add media queries as needed to optimize the responsive layout.
• Selector precision : Try to use more specific selectors to avoid accidentally affecting other elements on the page. For example, selector input.elementor-search-form__input is safer than selector input.

Through the above steps, you will be able to fully control the visual presentation and layout of the Elementor search form, so that it can be perfectly integrated into your website design. Custom CSS is a powerful tool for advanced customization of Elementor. Mastering it can make your page design more flexible and professional.

The above is the detailed content of Tutorial on style customization and centered positioning of Elementor search form. For more information, please follow other related articles on the PHP Chinese website!