Border color when focused

This topic has 4 replies, 2 voices, and was last updated 3 years, 6 months ago by Ernest Marcinko.

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

Author

Posts
November 24, 2022 at 7:10 am #40107

YUANFAN
Participant

Change the border color when the search has focus.
But my encoding has no effect.

November 24, 2022 at 2:55 pm #40118
Ernest Marcinko
Keymaster
Hi,

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:
```
input.orig:focus {
    box-shadow: 0 0 0 2px inset red !important;
}
```
November 27, 2022 at 8:45 am #40174
YUANFAN
Participant
What 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 3 years, 6 months ago by YUANFAN.
November 27, 2022 at 10:00 am #40177
YUANFAN
Participant
There 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 3 years, 6 months ago by YUANFAN.
November 28, 2022 at 3:32 pm #40204
Ernest Marcinko
Keymaster
Okay, 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:
```
.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%;
}
```
Author

Posts

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

You must be logged in to reply to this topic.