Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Border color when focused
This topic contains 4 replies, has 2 voices, and was last updated by Ernest Marcinko 1 year, 4 months ago.
- AuthorPosts
- November 24, 2022 at 7:10 am #40107
Change the border color when the search has focus.
But my encoding has no effect.November 24, 2022 at 2:55 pm #40118Hi,
I assume you want to change the input border when it is focused via custom CSS?
Well, it depends on the layout, and you may also need javascript for that – but for some cases this should work:
Best,input.orig:focus { box-shadow: 0 0 0 2px inset red !important; }
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
November 27, 2022 at 8:45 am #40174What I need to modify is the box border color, but I have no success.
input.orig:focus ~.asp_m ~.asp_m_14 {border: 3px solid rgb(255,255,255)!important;}- This reply was modified 1 year, 4 months ago by YUANFAN.
November 27, 2022 at 10:00 am #40177There is also an abnormal problem. All the color parameters, when selected, the Choose and cancel buttons below, disappear. Caused me to not be able to choose any color.
The reason is found. It is the Salient theme, caused by the Salient Core plugin.
- This reply was modified 1 year, 4 months ago by YUANFAN.
Attachments:
You must be logged in to view attached files.November 28, 2022 at 3:32 pm #40204Okay, I see what you mean now.
For the container box border you will need some custom javascript too, because the CSS language has no syntax for selecting parent elements.
So you will need a script to add a class to the box whenever it is focused, something like:jQuery(function($){ $('.asp_m input.orig').on('focus', function() { $(this).closest('.asp_m').addClass('asp_focused'); }); $('.asp_m input.orig').on('blur', function() { $(this).closest('.asp_m').removeClass('asp_focused'); }); });
..then maybe custom CSS:
Best,.asp_m.asp_focused { position: relative; } .asp_m.asp_focused::after { box-shadow: 0 0 0 3px inset white !important; content: ''; display: block; height: 100%; position: absolute; top: 0; width: 100%; }
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
- AuthorPosts
You must be logged in to reply to this topic.