matlab Pytorch jquery timer phpmyadmin Modernizr Validator vue框架 vue遍历 管理后台ui 微信小游戏开发视频 less使用 python转16进制 linux 获取系统时间 mysql新增用户和权限 python模块 pythonassert函数 python抛出异常 python排序 java遍历集合 java文件删除 sql语句大全实例教程 matlab2016a安装教程 sql行转列 js获取父节点 网络文件服务器 七宗罪游戏下载 蓝牙测试软件 js包含字符串 jquery手册 神牧属性 破天螺旋 超级邮件群发机 dos之家 lxe文件怎么打开 css文件 个人工作微信查社保 饿了么奖励金 mysql注释 sql语句执行顺序
当前位置: 首页 > 学习教程  > 

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

2020/10/16 18:01:44 文章标签: input边框颜色

1、结合项目写出输入框的最基本的属性&#xff1a; <div class"input-group"><div class"input-group-adds"><img src"images/图11.png" alt""></div><input type"text" class"form-contr…

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

<div class="input-group">
     <div class="input-group-adds">
         <img src="images/图11.png" alt="">
     </div>
     <input type="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;将默认样式覆盖掉即可。


本文链接: http://www.dtmao.cc/news_show_300303.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?