Fokus gradientu pole wejściowego

0

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;
}
2

Witam. Piszę sobię prostą aplikacje ale ma pewien problem ze stylami.

To może zacznij od stylu języka polskiego.
Nie da się zrozumieć, co piszesz.

0

Tak to wygląda u mnie
screenshot-20200822210528.png
A tak powinno
screenshot-20200822210553.png

2
.input span {
  -webkit-transform: scale(0.993, 0.94);
  transform: scale(0.993, 0.94);
  -webkit-transition: opacity .25s, -webkit-transform .5s;
  transition: opacity .25s, -webkit-transform .5s;
  transition: transform .5s, opacity .25s;
  transition: transform .5s, opacity .25s, -webkit-transform .5s;
  opacity: 0;
  position: absolute;
  z-index: 0;
  margin: 4px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px #fff, 3px -3px 30px #1beabd,  -3px 3px 30px #10abff;
}

Tu masz style elementu SPAN, który znajduje się zaraz za INPUT-em, a na stronie jest umieszczony pod nim i robi tą poświatę.

.input *:not(span):focus + span {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

A tu masz style opisujące reakcję po ustawieniu fokusa.
Selektor jest trochę dziwaczny, bo znaczy:

  • element span,
  • za dowolnym element nie będący SPAN-em i mającym ustawiony fokus,
  • wewnątrz elementu o klasie .input

Po ludzku powinno być to coś w stylu:

.element1:focus  + .element2 {...}

1 użytkowników online, w tym zalogowanych: 0, gości: 1