About the focus of input

realize the style of the effect picture, as shown in the figure. The effect is as follows: when input is focused, the div outer frame of serch-box changes color, so it can only be controlled by css, not by js or jq. What should I do?

Mar.02,2021

css does not support selecting parent element pure css. If you can add a sibling element to take charge of the style

.input:focus + .border {
    border-color: green;    
}

@ Li Shishi is feasible. For more information, please refer to a simple example here

https://codepen.io/Ash-sc/pen.


what cannot be done without css, css does not have a child-to-parent selector


css can also change the health of input elements

input:focus
{
background-color:yellow;
}

  https://caniuse.com/-sharpsearch=f.

Menu