自定义输入框的样式

最近在项目上用原生的html css js(jquery)进行页面的开发
有的需求要用到输入框
但是在项目上用原生的input type=text 那肯定是不行的，样式太难看
下面我给出我对input样式自定义的实现
html 代码

<div class="getName">
    <input type="text" value="" placeholder="陈晓天" name="username">
 </div>

对应的css 代码

// 移除选中时会出现的样式
input[type=text]:focus{
    outline: 0px;
}
// 给input 加自己要的样式
input {
    border: none;
    height: 20px;
    /*很关键：将默认的select选择框样式清除*/
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 95%;
    padding-left: 10px;
}
// 用与给input 输入框外面添加一个外框
.getName {
    /* position: absolute; */
    /* left: 0; */
    margin: 20px 0;
    /* margin-left: -47px; */
    width: 260px;
    height: 24px;
    border-radius: 3px;
    border: 1px solid #ccc;
    border-color: rgba(153, 129, 129, 0.5);
}

之前的

之后的
这样样式就好看多了，对应的样式你还可以自己进行修改