Search Box - how to change font and frame color

On demosite you can see Search box with grey border and grey font inside (under menu, over recent posts list|):

http://demo.athemes.com/sydney/projects/project-theta/

How can i change color of this Search Box border and color of “Search…” phrase font to make them more visible?

Thank you in advance

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    /* Border and text color */
    .widget_search input.search-field {
      border-color: #ff0000;
      color: #ff0000;
    }

    /* Placeholder text color */
    .widget_search input.search-field:-ms-input-placeholder {
      color: #fff000;
    }
    .widget_search input.search-field::placeholder {
      color: #fff000;
    }
    .widget_search input.search-field::-ms-input-placeholder { 
       color: #fff000;
    } 

Regards,
Kharis

1 Like

Thank you very much :slight_smile: it worked perfectly.

Do you have an idea how to put a “Search” button next to Search Box as it looks on the demosite visible at this link http://demo.athemes.com/sydney/?s=aaa
?

Hello there,

Try adding this CSS code:

    .widget_search .search-submit {
      display: block;
    } 

Regards,
Kharis

1 Like

Great :slight_smile: Thank you Kharis for an elegant solution :slight_smile:

(I still have to do some styling, for example I added

float: right;

because without it the button strangely ran under the Search Box.

I still can not stick it to the Search Box border (there is some gap between them), but if I did not find the solution myself, I will ask for help again :slight_smile:

Again Thank you

Hello there,

Try adding this extra CSS code:

    .widget_search .search-submit {
      display: block;
      float: right;
    } 

    .widget_search input.search-field {
      max-width: 100%;
    }

    .widget_search label {
      width: calc(100% - 122px);
      width: -o-calc(100% - 122px);
      width: -moz-calc(100% - 122px);
      width: -webkit-calc(100% - 122px);
    } 

Regards,
Kharis

since i have the same question, how can i change the coloring, when the search widget is active, when i clicked it? it get a blue border in my case, would like to remove this.

www.bambushammer.de

    .widget_search input:focus, .widget_search input {
       border-color:#0a000;
    }

if you click the search field, there is still a blue border left. what is this?

Hello there,

Try adding this CSS code:

    input[type="search"],
    input[type="search"]:hover,
    input[type="search"]:active {
      outline: none !important;
    }

Regards,
Kharis

as far as i can see, this worked like a charm. love your support forums!

Great!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis