Dolna ramka pola tekstowego

TakMaszRacje

2022-09-07T16:42:27+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 91

jak uzyskać taki efekt ekranu? Głownie chodzi mi o te podkreślenie pod wpisywanym tekstem i placeholder?

Screenshot 2022-09-07 at 16.39.39.png

katakrowa

2022-09-07T17:55:18+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Chorzów
Postów: 1670

https://jsfiddle.net/h68cuyep/

Kopiuj

<input type=text class='mojInput' placeholder='Tutaj dowolny tekst'>

<style>
  .mojInput{
     border:0px;
     border-bottom:solid 2px #333;
     height:50px;
     line-height:50px;
     padding:0px 0px 0px 50px;
     background-image:url(https://cdn-icons-png.flaticon.com/512/1829/1829007.png);
     background-size:30px 30px;
     background-position:10px 10px;
     background-repeat:no-repeat;
     font-weight:bold;
     font-size:18px;
     color:#333;
     outline-width: 0; /* opcjonalnie */
  }
</style>