Witam. Piszę sobię prostą aplikacje ale ma pewien problem ze stylami. Otóż mam na stronie inputa i chciałbym żeby wyglądał tak kidy użytkownik kliknie w tego inputa https://codepen.io/rikschennink/pen/rpNGyy. Jak widać na załączony przykładzie kiedy użytkownik najedzie na inputa robi się dookoła taki piękny box shadow u mnie na dodatek tego box shadowa po najechaniu na tego inputa tworzy się background-color w inpucie a nie chce zmiany koloru w inpucie tylko chce po kliknięciu w inputa zrobić box shadow dookoła inputa. Input w środku zarówno przed jak i po kliknięciu ma być przezroczysty. Niżej załączam mój kod:
<body>
<div class="container">
<div class="container-input">
<label for="text">
<p>Podaj wartość</p>
<input type="text" id="text" placeholder="Wprowadź coś....">
<button type="button">OK</button>
</label>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
height: 618px;
background: #1CD8D2;
background-image: linear-gradient(to top, #93EDC7, #1CD8D2);
}
.container {
display: flex;
justify-content: center;
align-items: content;
}
.container .container-input {
position: absolute;
top: 50%;
}
.container .container-input label {
display: block;
text-transform: uppercase;
font-family: 'Poiret One', cursive;
font-size: 30px;
font-weight: 700;
text-align: center;
}
.container .container-input input {
width: 100%;
display: inline-block;
margin-top: 30px;
padding: 8px;
outline-width: 0;
border-radius: 100px;
border: solid 3px transparent;
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(5deg, #10abff, #1beabd);
background-origin: border-box;
background-clip: content-box, border-box;
box-shadow: 2px 1000px 1px #fff inset;
font-size: 17px;
}
.container .container-input input:focus {
box-shadow: 3px -3px 30px #1beabd,
-3px 3px 30px #10abff;
border: none;
}
.container .container-input button {
position: relative;
width: 100%;
outline: none;
border-radius: 100px;
padding: 8px;
margin-top: 20px;
border: 3px solid transparent;
box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(5deg, #93EDC7, #1CD8D2);
background-origin: border-box;
background-clip: content-box, border-box;
box-shadow: 2px 1000px 1px #fff inset;
transition: box-shadow .5s;
font-size: 17px;
cursor: pointer;
}
.container .container-input button:hover {
box-shadow: none;
color: #fff;
}