先说下基础样式，直接加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的样式
}