CSS Styling

Anonymous

#43110

Hi

For some reason I am finding it difficult to custom style the form including the width of the search form and the submit button.

Could you confirm how this is done. I’ve tried all manner of ways to override these.

Thanks

<li class=”sf-field-search” data-sf-field-name=”search” data-sf-field-type=”search” data-sf-field-input-type=””> <label><input placeholder=”Leave blank to display all items in category…” name=”_sf_search[]” class=”sf-input-text” type=”text” value=”” title=””></label>

<input type=”submit” name=”_sf_submit” value=”Submit”>

Trevor

#43120

Hi

It will have to be done using Custom CSS, and this would be easiest for me to advise if you show me a live page with the form on, and make an annotated screenshot of what needs changing?

When you submit code here, can you put it inside the editor code tags (see the button bar over the editor) as the forum code does funky things to special characters.

If you want to keep the details private, click Private Reply before you submit.

Anonymous

#43123

This reply has been marked as private.

Trevor

#43175

Hi

It will require Custom CSS to be added to your WordPress installation. I will make it specific to this form ID.

#search-filter-form-42605 .sf-field-category, #search-filter-form-42605 .sf-field-submit {
  display: inline-block;
}
#search-filter-form-42605 .sf-field-submit {
  padding: 0;
  margin-left: 20px;
}
#search-filter-form-42605 input[type="submit"] {
  margin: 0;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 3px 11px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-shadow: 0 1px 1px #eeeeee;
  -webkit-box-shadow: 0px 1px 1px #eeeeee;
}

Well, if that isn’t quite what you want, you can fiddle with it?

Anonymous

#43369

Yes I managed to get that to work and the submit button displays correctly.

Thanks

[Author]

Posts