How to move text in a input field? - css

Question

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%;
}

Answer 1

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...

Answer 2

try this
CSS
input[type=text] {
padding-left: 25px; //change it base on your desired output
}
see my sample fiddle

Answer 3

Hey guys thanks for answering my question I greatly appreciate it. The style I was looking for was the input-placeholder CSS3 tag.
I just added these sets of tags to my page. Hopefully I can help someone like me.
input::-webkit-input-placeholder {
padding-left:20px;
}
input::-moz-placeholder {
padding-left:20px;
}
input:-moz-placeholder { /* Older versions of Firefox */
padding-left:20px;
}
input:-ms-input-placeholder {
padding-left:20px;
}

Answer 4

Please add this css
input[type='text'] {
padding-left: 25px;
max-width : calc(100% - 25px);
}

Answer 5

From what I can understand, you just need to remove the 'placeholder'attribute from the code for all three inputs in the form you created.
For your reference click here

Answer 6

You can wrap it inside a parent div with separate img and input tag as follows:
<div id="some_id">
<img src="http://images.brighthub.com/a3/d/a3d2a3f5888d96ddde78d526bf9448dddf2fb4aa_small.jpg">
<input type="text" placeholder="Enter Your Name" id="some_text_id">
</div>
EXAMPLE FIDDLE