search widget

  • Resolved Anouk

    (@anouk197)


    6 years, 6 months ago

    I’d like to change the appearance of the search widget in my footer.

    Right now I’m using this CSS:
    .widget-area .search-field {
    max-width: 95px;
    background-color: transparent;
    border-color: khaki;
    }
    to make it look like this:

    As you can see the text (‘search’ and when typing) is grey. How do I make that black?
    Plus, when I click in the search field to start typing, the border becomes black.

    How do I prevent that from happening? I’m not sure yet about the yellow border. I either want this or no border. So how do I make sure the border stays the same when you start typing?

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello there,

    Try this code: 

    
.widget_search input[type="search"],
.widget_search input[type="search"]:focus {
  border: none;
  outline: none;
  color: #000;
}

    Regards,
    Kharis

    Thread Starter Anouk

    (@anouk197)

    Thank you! That worked great! One more thing: when I start typing now the text is black, but before I started typing “search” (which is in the search-field by default) is still grey. Is it possible to make that black as well? Plus, is it possible to alter the text-size of what your typing in the search-field?

    Hello there,

    Try this CSS code: 

    
/* Text font size */
.widget_search input[type="search"] {
  font-size: 16px;
}

/* Placeholder color */
.widget_search input[type="search"]:-moz-placeholder,
.widget_search input[type="search"]::-moz-placeholder {
  color: #000;
}
.widget_search input[type="search"]:-ms-input-placeholder {
  color: #000;
}
.widget_search input[type="search"]::-webkit-input-placeholder {
  color: #000;
}

    Regards,
    Kharis

    Thread Starter Anouk

    (@anouk197)

    Thank you so much!

    You’re welcome!

    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘search widget’ is closed to new replies.