CODEWITHSUNDEEP
csssvginput
ChrisSlightGhost
ChrisSlightGhost

Reputation: 117

How to move text in a input field?

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

Upvotes: 2

Views: 13425

Answers (6)

ChrisSlightGhost
ChrisSlightGhost

Reputation: 117

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

This is the results with the tag add.

Upvotes: 3

Jrey
Jrey

Reputation: 1638

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

Upvotes: 3

Abhi
Abhi

Reputation: 4261

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

Upvotes: 0

rick jan cawaling
rick jan cawaling

Reputation: 440

try this

CSS

input[type=text] {
      padding-left: 25px; //change it base on your desired output
}

see my sample fiddle

Upvotes: 3

Jai Khanna
Jai Khanna

Reputation: 1

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

Upvotes: 0

Mitul
Mitul

Reputation: 3427

Please add this css

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

Upvotes: 1

Related Questions