How to make some adjustments to the serach

[NicsaParticipant]

Hey,
Firstly thanks for a great plugin.
I have two questions.
1)can i add a serach button next to the settings boxes
2)how can i change the live results to be 100% of the content as right now it just stays the size of the search input
as this is the css i changed to make go to 924px but wont this effect the way it looks on mobile?
.horizontal, .wpdreams_asp_sc-1 .asp_an_fadeInDrop{width:924px !important;}

this is the url:https://holidayxentral.com/test-home/

[Ernest MarcinkoKeymaster]

Hi,

Thank you for your kind words!

1. This will help you with that
2. I suggest trying the results shortcode. It will make a ‘block’ wherever you place it, each search instance has one results shortcode generated. This container will always follow the width of the parent container, in this case, that should be the page width.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[NicsaParticipant]

Hey
one last thing the arrows in the drop downs how can i change the background color i can find the class and the editor dont have a option to customize the color background of the arround box in the dropdown feild

[Ernest MarcinkoKeymaster]

Hi!

Can you please be a bit more specific which part? You can send a screenshot if you want, I will try to construct a custom CSS if possible.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[NicsaParticipant]

You see in the serach settings the drop down arrows that point down that are in grey i need to change that background color
see the attachment

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi,

I get it now, thank you. Unfortunately that is handled by the browser, and in most cases it cannot be changed. Chrome allows some changes, in Firefox you can only hide it:

.asp_select_label select {
   -moz-appearance: none;
}

Hopefully browsers will support changes to form elements in the future, that would be really nice.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[NicsaParticipant]

Hey wont this help

input:not([type="button"]):not([type="submit"]):not([type="reset"])

[Ernest MarcinkoKeymaster]

Hi,

No, because the arrow is not an input type, but part of the ‘select’ form element, which cannot be targeted via CSS.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[NicsaParticipant]

On my pervious serach form it has been targeted by css go to holidayxentral.com and have alook at my serach there you will see the arrow is a select feild and it has a back ground attached to them.
are you 100% sure we cant change it

[NicsaParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

That could actually work. It will still hide the select arrow, but then add an ‘icon’ after the select box as an arrow replacement. It is a very clever solution. Don’t forget to include the icon set, if there was any used, that contains the

'\f078'

character.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[NicsaParticipant]

i will pull font awesome in on the page as a seprate.
you can use the code in your knowledge base if you want to:)

[NicsaParticipant]

HEy,
I have found a better solution for this when done with the css adjustments i will share it with you

[Ernest MarcinkoKeymaster]

Thank you, I will add it to the knowledge base then 🙂

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[NicsaParticipant]

select::-ms-expand {
     display: none;
}
 
.asp_select_label:after {
  content: '>';
  font: 28px "Consolas", monospace;
  color: #999;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 14px;
  /*Adjust for position however you want*/
  
  top: 5px;
  padding: 0 0 2px;
  border-bottom: none;
  /*left line */
  
  position: absolute;
  pointer-events: none;
}
 
.asp_select_label select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  
  display: block;
  width: 100%;
  max-width: 320px;
  height: 50px;
  float: right;
  margin: 5px 0px;
  padding: 0px 24px;
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  -ms-word-break: normal;
  word-break: normal;
}

This will change the arround on the select drop downs you can adjust the colors and the font and site.
it is easier to use a symbol over font awesome

[Author]

Posts