Question

所以我正在学习并尝试建立自己的网站。我有大部分的形式我喜欢它但是，我不知道如何清除占位符文本远离svg img所以它将是清晰的。一些帮助将不胜感激。

提前致谢。

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

您需要编辑占位符，您可以使用此

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

请查看有关如何编辑占位符的最新更新。谢谢，我希望它能帮到你。

试试这段代码......

Answer 2

嘿伙计们回答我的问题，我非常感谢。我正在寻找的样式是输入占位符CSS3标记。

我刚刚在页面中添加了这些标签集。希望我可以帮助像我这样的人。

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 3

试试这个

<强> CSS

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

请参阅我的示例fiddle

Answer 4

请添加此css

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

Answer 5

根据我的理解，您只需要从您创建的表单中的所有三个输入的代码中删除“占位符”属性。

如需参考，请点击here

Answer 6

您可以使用单独的 img 和输入标记将其包装在父div中，如下所示：

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

示例FIDDLE

如何在输入字段中移动文本？

6 个答案: