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

Question

所以这是我在形式上的第一次破解，毫无疑问，我在这里和那里碰到了几个颠簸。但是它周围的一切都是一个有趣的过程，并极大地促进了我的网络发展：P。

我在移动文本时遇到问题（用户实际上会开始输入的内容（不是占位符文本，我希望它在哪里））在我输入的字段中我试过了在我对Stack Overflow上的问题进行一般性搜索时，使用input.text{padding-left:25px;}，input[type="text"]{padding-left:25px;}以及更多内容，无济于事。

＆＃13;

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Montserrat);

html{  
  background:url("blurredNight.jpg") no-repeat;
  background-size: cover;
  height:100%;
}

body{
	margin: 0;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

.fixedWidth{
	width: 1136px;
	margin:0 auto;
}

#topBar{
	border-radius: 5px;
	width: 100%;
	height: 59.5px;
	background-color: rgba(107,63,160,0.5);
	color: #FFFFFF;
}

#formDiv{
	background-color:rgba(107,63,160,0.4);
	padding-left:35px;
	padding-right:35px;
	padding-top:35px;
	padding-bottom:50px;
	width: 450px;
	float: left;
	left: 50%;
	position: relative;
  	margin-top:30px;
	margin-left: -260px;
  	border-radius: 7px;
  	border-radius: 7px;
  	top: 113px;
}

#headerDiv{
	width: 100%;
	bottom: 30px;
	position: relative;

}

#header{
	text-align: center;
	color: #FFFFFF;
	font-size: 200%;
	font-weight: bold;
	bottom: 20px;
}

.inputTagz{
	padding-left: 25px;
	cursor: text;
	font-size: 17.5px;
	float: left;
	width: 100%;
	font-size: px;
	padding-top: 11px;
	padding-bottom: 11px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin-top:20px;
  	font-weight:700;
}
input.name{
	padding-left: 25px;
}

.inputTagz::-webkit-input-placeholder {
	padding-left:25px; 
}
.inputTagz::-moz-placeholder {
	padding-left:25px; 
}
.inputTagz:-moz-placeholder {   /* Older versions of Firefox */
	padding-left:25px; 
}
.inputTagz:-ms-input-placeholder { 
	padding-left:25px; 
}

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

#buttonBlack{
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	float:left;
	width: 100%;
	border: #fbfbfb solid 4px;
	cursor:pointer;
	background-color: rgb(107,63,160);
	color:white;
	font-size:24px;
	padding-top:22px;
	padding-bottom:22px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	position: relative;
	left: 3px;
  	margin-top:15px;
  	font-weight:700;
	}

#buttonBlack:hover{
	background-color: rgba(107,63,160,0.2);
	color: #0493bd;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div id="container">
    <div class="fixedWidth">
        <div id="topBar">
            <div class="fixedWidth"></div>
        </div>
        <div id="formDiv">
            <form class="mainForm" id="formId">
                <div id="headerDiv">
                    	<h2 id="header">
								Open your world.
							</h2>

                </div>
                <p>
                    <input name="name" type="text" placeholder="Full Name" id="name" class="inputTagz" />
                </p>
                <p>
                    <input name="emailPhone" type="text" placeholder="Phone or Email" id="emailPhone" class="inputTagz" />
                </p>
                <p>
                    <input name="password" type="password" placeholder="Password" id="password" class="inputTagz" />
                </p>
                <div class="submit">
                    <input type="submit" value="Sign Up" id="buttonBlack" />
                </div>
            </form>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

A link to RT code so you can see it in action

Answer 1

在文本框中使用padding-left并从:placeholder样式中删除填充

删除这些：

.inputTagz::-webkit-input-placeholder {
    padding-left:25px; 
}
.inputTagz::-moz-placeholder {
    padding-left:25px; 
}
.inputTagz:-moz-placeholder {   /* Older versions of Firefox */
    padding-left:25px; 
}
.inputTagz:-ms-input-placeholder { 
    padding-left:25px; 
}

Answer 2

所以，在你的CodePEN中，我删除了你创建的所有其他选择器（添加padding-left），我只添加了这个：

input[type="text"]{
    padding-left: 25px !important;
}

它就像一个魅力。文本从左边缘推了25px。

Answer 3

 input[type=text],input[type=password]  {
     padding-left: 70px;
 }

使用正确的选择器，在您的情况下是类型文本/密码，或创建自己的类。

Answer 4

您也可以简单地添加它。虽然它会使你的文字居中。

input{
    text-align: center
}