Search Form Shortcode

[rogerp]

I have implemented a search bar in my homepage using this code

Add WordPress Search Box Code in 5 Minutes Flat

It works fine but Ideally I want to remove the search button and have something more like here

https://www.udemy.com/

Where I can put - "What do you want to learn" in the search bar

Anyone any ideas?

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

https://www.rogerperkin.co.uk/

[andytc]

You can use this code for the text -

https://my.studiopress.com/documentation/snippets/search-form/customize-the-search-form-input-button/

[rogerp]

Thanks Andy,

What I ideally want to do is to remove the search button, make the search box only half width and change the text inside the search box

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[rogerp]

I have found this

Search Form

Managed to change the text in the search form box

Just need to remove the button and make the box half width, but it's in a widget which is full width?

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[andytc]

Try this , adjust percentage widths as you need , don't forget your mobile views , I've added a media query to makes this look better , see how it goes and adjust as you need.

.search-form:before {
  content:none;
}

.search-form input[type=search] {
  padding-left: 0;
  margin-right: 20px;
  width: 80%;
  text-align: center;
}

.search-form input[type=submit] {
  display:inline-block;
}

@media only screen and (max-width: 880px) {
 .search-form input[type=search] {
   margin-right: 0;
   width: 100%;
   text-align: center;
 }

 .search-form {
   margin-top: 20px;
 }

.search-form input[type=submit] {
  display:block;
  margin: 20px auto 0;
 }

}

[andytc]

That might not be what you wanted ? , you want to remove the search text and only have the icon ?

In that case try here -

https://wpsites.net/web-design/3-ways-to-customize-genesis-search-form-input-box-button/

[Author]

Posts