html和css中input输入的样式调整

先说下基础样式，直接加class明就可以修改的

<input class="name" placeholder="请输入名字" type="text" />

先看下原来的样子

开始调整:

.name {
     width: 200px;
     height: 30px;
     border: 1px solid #139be1;
     border-radius: 5px;
     color: blue;
     font-size: 15px;
     font-weight: bold;
     background-color: #faf1d8;
     text-indent: 10px;
   }

再看下效果（丑的事别管。。。）

继续调整获取焦点之后的样式

.name:focus {
  outline: 2px dashed #2feb2f;
  background-color: #aaa;
}

下面再修改其他的样式

.name:placeholder-shown {
  color: red;
  border: 3px solid yellow;
}

这个样式是修改显示placeholder时候的样式，也就是输入框里没值时的样式（到这里已经基本上放弃美观了。。。）

然后设置placeholder的样式

.name::-webkit-input-placeholder {
  color: #2feb2f;
  font-size: 12px;
  font-weight: normal;
}

这里是webkit内核浏览器的，不同浏览器写自己对应的前缀就好了

最后修饰出来的效果已经不忍直视了

补充

移动端（比如微信小程序）修饰placeholder用的不是css选择器，而是placeholder-class，像下面这样

<input class="name" placeholder-class="placeholder" placeholder="请输入名字" type="text" />

.placeholder{
	//这里写placeholder的样式
}