-1

i new to elementor and im trying to position my search form in the middle and remove the styling that it has, i want to remove the border and the outline around the input and also remove the on click styling it hasthis is what i want it to look like this is what it looks like i have tried going to the advanced section and change the code but its not working and adding custom css to it to try and position the search form is not working

Nicole dudley
  • 3
  • 2

1 Answers1

0

Try adding this CSS to Advanced Tab > Custom CSS of the Form Widget

selector .elementor-search-form__container {
    background-color: transparent !important;
}
selector input {
    background-color: #fff;
    border-radius: 0px;
    margin-right: 20px;
}

https://prnt.sc/CGTr6GAYPEEk

The John
  • 71
  • 2
  • thank you I resolved the background color and spacing between the input field and the button but I'm STILL STRUGGLING WITH centering it and removing the black outline – Nicole dudley Aug 05 '22 at 10:43
  • Share your URL, if you want, so I can see and fix it instantly – The John Aug 06 '22 at 14:08
  • unfortunately i cannot do that it is a private project – Nicole dudley Aug 08 '22 at 09:10
  • Well, for centering the form, you can apply `display: flex;` to the container of the form, or any parent container, and use `justify-content: center;`. For removing the outline, if it is a border you can use `border: none;`. If there is an outline when clicking on the input field, you can try using `input:focus { border: none; }` – The John Aug 09 '22 at 09:03