Border color when focused

This topic contains 4 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 2 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #40107
    YUANFAN
    YUANFAN
    Participant

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

    #40118
    Ernest Marcinko
    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;
    }
    Best,
    Ernest Marcinko

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


    #40174
    YUANFAN
    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 2 months, 1 week ago by YUANFAN YUANFAN.
    #40177
    YUANFAN
    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 2 months, 1 week ago by YUANFAN YUANFAN.
    Attachments:
    You must be logged in to view attached files.
    #40204
    Ernest Marcinko
    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%;
    }
    Best,
    Ernest Marcinko

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


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

You must be logged in to reply to this topic.