Stylizacja Input'a

Question

Cześć, mam taki problem ---- chcialbym zrobić panel logowania coś na wzór tego.

tylko nie wiem jak zrobić i czy się wogóle tak da zrobić żeby wewnątrz inputa po lewej stronie był tysunek np.klucza przy wpisywaniu hasła  

Answer 1

Skoro masz wzór to dajesz prawy przycisk myszy na to pole, bierzesz zbadaj element i jedziesz ;)

A obstawiam że jest to po prostu background-image.

Comments

to jest tylko zdjęcie ściągnięte z neta

---

Okej rozumiem ;)

https://jsfiddle.net/cn84qngm/

Reszta to już kwestia dalszej stylizacji pola i będzie wyglądało tak jak pokazałeś ;)

---

ok.....wielkię dzięki o to mi chodziło !!!

---

Cieszę się, nie ma sprawy ;)

Answer 2

W Bootstrapie można użyć klasy do spana o nazwie glyphicon. Glyphicony to przeróżne obrazki które są na stronie jako czcionka, możliwe, że tego użyli choć nie jestem pewien. Pozdrawiam :)

Comments

co prawda nie lubie bootstrapa ale i tak dzięki :)

---

Dlaczego nie lubisz?

Answer 3

Np. coś takiego?

HTML:

<input type="text" placeholder="☹ SAD EMOTICON">

CSS:

input[type=text] {
  padding: 5px;
  border: 2px solid #ccc;
  border-radius: 5px;
  -webkit-border-radius: 5px;
}
input[type=text]:focus {
  border-color: #333;
}

Podgląd: http://codepen.io/COLDIC3/pen/KdPXNv