Icon in ein Textfeld

[IsyChan]

Hallo MrMurphy,

Die Hauptursache für benutzerunfreundliche Webseiten.

mag sein, aber auch ein Grafiker arbeitet viel lieber an Grafiken die IHM gefallen! Ich muss die Seite bei Kunden vorstellen, was bringt es mir dann eine Seite die toll auf dem Handy ausschaut obwohl die HD Videos niemals so gut auf dem Handy rüber kommen wie auf dem PC, ich aber nicht komplett dahinter stehe. Wenn du mal als Verkäufer gearbeitet hast, dann wüsstest du jetzt die Antwort!

Schon mal CSS probiert?

klar, wie du auf dem Bild sehen kannst, ist das mit CSS gestylte

<form name="formular" method="post" action="">
   <label for="name" class="label_name">Ihr Name</label>
   <input type="text" name="name" id="name" value=""><br>
   <button type="submit" id="abschicken">Formular abschicken</button>
</form>

  * {
    box-sizing: border-box;
  }

  form {
    width: 500px;
  }

  input[type="text"], 
  input[type="password"], 
  input[type="email"], 
  input[type="url"], 
  input[type="tel"], 
  input[type="number"], 
  input[type="date"], 
  textarea, 
  select {
    height: 42px;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-size: 16px;
    width: 100%;
    position: relative;
    background-color: #f2f2f2;
  }

  label {
    margin: 0 0 8px 4px;
    color: #999999;
  }

  label[for="name"]::after {
    font-family: "FontAwesome"; 
    content: "\f007";
    display: block;
    position: absolute;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    height: 42px;
    width: 36px;
    z-index: 1;
    opacity: 0.33;
  }

  #name {
    padding-left: 50px;
  }

  button {
    margin-top: 1em;
  }