CSS样式学习之--去除按钮、输入框、图形/图片按钮等点击时外边框
按钮，图形/图片按钮，以及输入框，当我们点击或者输入时，都会出现一个浅蓝的外边框。虽然可以起到醒目的作用，但是看上去很不舒服，尤其是在背景很明显，比如是白，红的时候，就显得格外碍眼。
   
所以，经常需要将这个浅蓝外边框去掉，使得我们在点击和输入的时候不再出现外边框。实现效果可以通过CSS样式添加；可以直接通过style写在标签内；还可以直接写成标签样式，以达到特定标签统一化。
.click_setting{outline:none;box-shadow: none;}
button{outline:none;box-shadow: none;}
   
CSS样式及布局标签
button{        //button标签样式，对本页面所有button标签有效
outline:none;
box shadow怎么设置box-shadow: none;
        }
        .click_setting{        //将样式写成类，则标签可以通过添加类进行样式添加
outline:none;
box-shadow: none;
        }
<div>
<buttonclass="button1 bu-setting" >
            button1
</button>
<buttonclass="button2 bu-setting ml10">
            button2
</button>
<buttonclass="button3 bu-setting ml10">
            button3
</button>
</div>
<div class="mt20">
<input type="search" class="search" placeholder=""  value="" />            //以style方式直接写成内联样式
</div>
<div class="mt20">
<input type="image" src="img/search.png" class="img-w-h  click_setting" alt="#" title="Search">                                //以类的方式添加样式
</div>
其他样式类：
.
mt20{
margin-top: 20px;
        }
        .ml10{
margin-left: 10px;
        }
.bu-setting{
            /*border: none;*/
width: 90px;
height: 34px;
        }
.button1{
color: black;
background-color: #FFFFFF;
        }
        .button3{
background-color:red;
        }
        .button2{
background-color: #36C6D3;
        }
        .search{
border: 1px solid #DBDBDB;
color: black;
text-align: center;
width: 200px;
height: 34px;
border-radius: 15px;
        }
        .img-w-h{
height: 28px;
width: 28px;
        }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。