Input to get the focus, how to use CSS to achieve two-sided box? The following figure

the following figure:
when getting focus, how to add a border, to input. This boder is thicker than the default border. Note that this is not the effect of css shadow, there is no feathering.

I think of putting a div, thick border on the outside of input and adding it to div, but this needs to be operated with js, is it possible to use pure css to achieve this effect? For example, pseudo-classes like input:focus are implemented.

Aug.23,2021

input:focus {
    border-color: -sharp7952b3;
    box-shadow: 0 0 0 3px rgba(121,82,179,.25);
}

input focus


<div class="box">
    <input/>
    <div></div>
</div>

.box{
  position: relative;
}
.box div{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.box input:focus + div{
  border: 3px solid -sharp000;
}

idea: when
gets focus, add a class class name
.div {
box-shadow:0 0 5px 5px value;
}

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b30c72-2bd6c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b30c72-2bd6c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?