如何去除表单元素获得焦点时的外边框:outline (轮廓)


      我们在做制作表单页面时,经常会需要消除表单元素带来的边框,这时候我们需要用到两个属性:

   1、表单元素未激活状态下的边框,不实现边框: border:none;

         2、表单元素获得焦点时的轮廓,隐藏轮廓: outline:medium;

 

  具体代码如下:

            .form_row input[type=text],
            .form_row input[type=password] {
                width: 520px;
                height: 40px;
                margin: 0px auto;
                margin-left: 5px;
                display: block;
               border: none;
                color: #999999;
                font-size: 14px;
                border-radius: 5px;
                background-color: #eff0f4;
                text-indent: 45px;
            }
            .form_row input:focus {
                background-color: white;
                box-shadow: 0 0 15px #ece9e9;
                border: none;
              outline: medium;
            }

效果如下:
  

  


PS:

 这里有一点需要注意的是,经量不要使用border:0;和outline:0;
对比0与none;之间的区别在于有渲染和没渲染,感觉他们和display:none;与visibility:hidden;的关系类似


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2026 CODEPRJ.COM