Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to move text in a input field?

Tags:

css

input

svg

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%;
}
like image 908
ChrisSlightGhost Avatar asked Nov 27 '25 14:11

ChrisSlightGhost


1 Answers

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

like image 154
John Rey M. Baylen Avatar answered Nov 30 '25 04:11

John Rey M. Baylen



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!