如何去除表单元素获得焦点时的外边框: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删除。



猜您在找 去除input边框 input去除边框 去除input获取焦点时的蓝色外边框 input在获得焦点时外边框不变色 边框(Border) 和 轮廓(Outline) 属性 CSS中input输入框点击时去掉外边框方法【outline:medium;】----CSS学习 去除手机浏览器input焦点默认边框(直接用outline:none就可以了) CSS 轮廓(outline):位于边框边缘的外围,可起到突出元素的作用 当元素获得焦点和失去焦点时,触发 的事件。 (谷歌浏览器等)解决css中点击input输入框时出现外边框方法【outline:medium;】 WPF控件获得焦点时去除虚线框 通过css样式去除标签的外边框
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM