So I'm in the process of learning and trying to make my own website. I have most of the form how I would like it but, I'm not sure how to clear the placeholder text away from the svg img so it will be legible. Some help would be greatly appreciated.
Thanks in advance.
Screen Capture of my problem. Also if you would tell me if it looks okay that would be great also!
.inputTagz{
padding-left: 25px;
cursor: text;
font-size: 14px;
float: left;
width: 100%;
font-size: px;
padding-top: 11px;
padding-bottom: 11px;
margin-top:20px;
font-weight:700;
}
#name{
background-image: url("man.svg");
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#emailPhone{
background-image: url("mail.svg");
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#password{
background-image: url("lock.svg");
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#formDiv{
width: 450px;
float: left;
left: 50%;
}
you need to edit your place holder, you can use this
#emastrong textilPhone {
background-image: url("mail.svg");
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#password {
background-image: url("lock.svg");
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#emailPhone::-webkit-input-placeholder {
padding-left: 25px;
}
#emailPhone::-moz-placeholder {
padding-left: 25px;
}
#emailPhone:-moz-placeholder { /* Older versions of Firefox */
padding-left: 25px;
}
#emailPhone:-ms-input-placeholder {
padding-left: 25px;
}
#password::-webkit-input-placeholder {
padding-left: 25px;
}
#password::-moz-placeholder {
padding-left: 25px;
}
#password:-moz-placeholder { /* Older versions of Firefox */
padding-left: 25px;
}
#password:-ms-input-placeholder {
padding-left: 25px;
}
please check the latest update about how to edit the placeholder. Thank you, I hope it will help you.
try this code...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With