更改输入框边框默认颜色的方法

1、结合项目写出输入框的最基本的属性:

<div class="input-group">
     <div class="input-group-adds">
         "images/图11.png" alt="">
     div>
     "text" class="form-control" placeholder="邮箱/用户名/已验证手机">
div>

2、css样式

.input-group{
  color: inherit;
  width: 100%;
  border:1px solid transparent;
  padding-left: 36px;
  position: relative;
  height: 35px;
  line-height: 35px;
  margin-top: 5px;
  margin-bottom: 5px;
  .input-group-adds{
    img{
      vertical-align: middle;
    }
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    border:1px solid #fdf0e5;
    background-color: #dfdfdf;
    text-align: center;

  }
  .form-control{
    width: 100%;
    height: 36px;
    padding: 6px 12px;
    border:1px solid #fdf0e5;
    color: #cacaca;
  }

}

注:更改输入框原有样式只需写入`border:1px solid #fdf0e5;将默认样式覆盖掉即可。

你可能感兴趣的:(学习笔记)