Input icons in every input instead of amount of them [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
What should I change in my CSS to put every i icon to correct input box?
..
What the hell I should edit there when is already answered...
.box_main {
width: 50%;
margin: 0 auto;
}
.box_main_content {
width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
padding: 20px;
margin: 20px 10px 20px 10px;
float: left;
}
.box_main_content_data {
padding: 1em 0 0 0;
text-align: center;
}
.inputWithIcon {
position: relative;
}
.inputWithIcon i {
position: absolute;
left: 0;
top: 8px;
padding: 19px 8px;
color: #aaa;
transition: 0.3s;
}
.inputWithIcon input:focus + i {
color: rgb(0, 0, 0);
}
input {
font-family: 'Nunito', sans-serif;
width: 100%;
border: 2px solid rgb(0, 0, 0);
margin: 8px 0;
outline: none;
padding: 5px;
box-sizing: border-box;
transition: 0.3s;
padding-left: 40px;
}
input:focus {
box-shadow: 0 0 8px 0 rgb(0, 0, 0);
}
.lost_pass {
border-top: 1px solid rgb(170, 170, 170);
margin: 1em 0 1em 0;
padding-top: 1em;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="box_main">
<div class="box_main_content">
<div class="box_title">
<i class='material-icons'>login</i>Přihlášení
</div>
<div class="box_main_content_data inputWithIcon">
<form method="post">
<input type="text" name="name" placeholder="Přihlašovací jméno nebo E-mail" required>
<i class='material-icons'>person</i>
<input type="password" name="password" placeholder="Heslo" onkeyup="lettersOnly(this)" required>
<i class='material-icons'>lock</i>
<br>
<button name="btn_login">Přihlásit se</button>
</form>
<div class="lost_pass">
<button name="btn_login">Zapomenuté heslo?</button>
</div>
</div>
</div>
<div class="box_main_content">
<div class="box_title">
<i class='material-icons'>person_add</i>Regsitrace
</div>
<div class="box_main_content_data inputWithIcon">
<form method="post">
<input class="inputWithIcon" type="text" name="name" placeholder="Přihlašovací jméno" onkeyup="lettersOnly(this)" required>
<i class='material-icons'>person</i>
<input type="password" name="password" placeholder="Heslo" onkeyup="lettersOnly(this)" required>
<i class='material-icons'>lock</i>
<input type="password" name="password_repeat" placeholder="Heslo znovu" onkeyup="lettersOnly(this)" required>
<i class='material-icons'>lock</i>
<input type="text" name="email" placeholder="E-Mail" required>
<i class='material-icons'>email</i>
<input type="text" name="firstname" placeholder="Jméno">
<i class='material-icons'>badge</i>
<input type="text" name="surname" placeholder="Příjmení">
<i class='material-icons'>badge</i>
<input type="date" name="age">
<i class='material-icons'>badge</i>
<label class="radio-checkbox">
<input type="radio" name="sex" value="0" checked>
<i class='material-icons'>male</i>
<span class="checkmark"></span>
</label>
<label class="radio-checkbox">
<input type="radio" name="sex" value="1">
<i class='material-icons'>female</i>
<span class="checkmark"></span>
</label>
</form>
</div>
</div>
</div>

Answer 1

Try to wrap every input with div and add class="inputWithIcon" to div's:
.box_main {
width: 50%;
margin: 0 auto;
}
.box_main_content {
width: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
padding: 20px;
margin: 20px 10px 20px 10px;
float: left;
}
.box_title {
margin-left: 1em;
}
.box_main_content_data {
padding: 1em 0 0 0;
text-align: center;
}
.inputWithIcon {
position: relative;
}
.inputWithIcon i {
position: absolute;
left: 0;
top: 1px;
padding: 9px 8px;
color: #aaa;
transition: 0.3s;
}
.inputWithIconLabel i {
position: absolute;
left: 0;
top: -2px;
padding: 0px 8px;
color: #aaa;
transition: 0.3s;
}
.inputWithIcon input:focus + i {
color: rgb(0, 0, 0);
}
input {
font-family: 'Nunito', sans-serif;
width: 100%;
border: 2px solid rgb(0, 0, 0);
margin: 8px 0;
outline: none;
padding: 5px;
box-sizing: border-box;
transition: 0.3s;
padding-left: 40px;
}
input:focus {
box-shadow: 0 0 8px 0 rgb(0, 0, 0);
}
.lost_pass {
border-top: 1px solid rgb(170, 170, 170);
margin: 1em 0 1em 0;
padding-top: 1em;
}
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<div class="box_main">
<div class="box_main_content inputWithIcon">
<div class="box_title"><i class="material-icons">login</i>Přihlášení</div>
<div class="box_main_content_data ">
<form method="post">
<div class="inputWithIcon">
<input
type="text"
name="name"
placeholder="Přihlašovací jméno nebo E-mail"
required
/><i class="material-icons">person</i>
</div>
<div class="inputWithIcon">
<input
type="password"
name="password"
placeholder="Heslo"
onkeyup="lettersOnly(this)"
required
/><i class="material-icons">lock</i>
</div>
<br /><button name="btn_login">Přihlásit se</button>
</form>
<div class="lost_pass">
<button name="btn_login">Zapomenuté heslo?</button>
</div>
</div>
</div>
<div class="box_main_content inputWithIcon">
<div class="box_title">
<i class="material-icons">person_add</i>Regsitrace
</div>
<div class="box_main_content_data ">
<form method="post">
<div class="inputWithIcon">
<input
type="text"
name="name"
placeholder="Přihlašovací jméno"
onkeyup="lettersOnly(this)"
required
/><i class="material-icons">person</i>
</div>
<div class="inputWithIcon">
<input
type="password"
name="password"
placeholder="Heslo"
onkeyup="lettersOnly(this)"
required
/><i class="material-icons">lock</i>
</div>
<div class="inputWithIcon">
<input
type="password"
name="password_repeat"
placeholder="Heslo znovu"
onkeyup="lettersOnly(this)"
required
/><i class="material-icons">lock</i>
</div>
<div class="inputWithIcon">
<input
class="inputWithIcon"
type="text"
name="email"
placeholder="E-Mail"
required
/><i class="material-icons">email</i>
</div>
<div class="inputWithIcon">
<input
type="text"
name="firstname"
placeholder="Jméno"
/><i class="material-icons">badge</i>
</div>
<div class="inputWithIcon">
<input type="text" name="surname" placeholder="Příjmení" /><i
class="material-icons"
>badge</i
>
</div>
<div class="inputWithIcon">
<input class="inputWithIcon" type="date" name="age" /><i
class="material-icons"
>badge</i
>
</div>
<div class="inputWithIconLabel">
<label class="radio-checkbox inputWithIcon">
<input type="radio" name="sex" value="0" checked /><i
class="material-icons"
>male</i
>
<span class="checkmark"></span>
</label>
<label class="radio-checkbox inputWithIcon">
<input type="radio" name="sex" value="1" />
<i class="material-icons">female</i>
<span class="checkmark"></span>
</label>
</div>
</form>
</div>
</div>
</div>