input样式重置(outline:none)

我们在写表单的时候,经常需要自定义表单的样式,当然input输入框也不例外,那么如何能写出好看一点的输入框呢?

     例如简单的三个空按钮: 

      <input type="button" id="btn1">
      <input type="button" id="btn2">
      <input type="button" id="btn3">

     来个简单的样式:

      width: 50px;
      height: 50px;
      border-radius:50%;

    运行如下图显示的(各个浏览器之间默认样式有所差距):

      

   所以,首先要将input输入框的默认样式去掉(让其在任何地方显示的一样):

      border:0;

      outline:none;

   再看效果:

      ;

    这样就ok啦;

    

原文地址:https://www.cnblogs.com/xy88/p/11408071.html

时间: 2024-10-24 07:34:49

input样式重置(outline:none)的相关文章

css扁平化博客学习总结(二)css样式重置

css样式重置 方法一:不推荐使用,这么写会让网页解析速度变慢. *{ margin: 0; padding: 0;} 方法二:大家常用的写法,比较流行. body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,li, dl, dt, dd, form, a, fieldset, input, th, td{margin: 0; padding: 0; border: 0; outline:

css样式重置

/* 样式重置 */body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,form,input,textarea,th,td,select{ margin:0; padding:0;}em{ font:normal;}a{ text-decoration:none;}li{ list-style:none;}img{ border:0; vertical-align:top;}table{ border-collapse:collapse;}input,textarea{ o

常见网站CSS样式重置

腾讯 1 2 3 4 5 6 7 8 9 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%} a{color:#172c45;

移动端默认样式重置

1.outline:none (1)在pc端为a标签定义这个是为了取消ie浏览器下点击a标签时出现的虚线.ie7及以下浏览器还不识别此属性,需要在a标签上添加hidefocus="true" (2)input,textarea{outline:none}  取消chrome下默认的文本框聚焦样式 (3)在移动端是不起作用的,想要去除文本框的默认样式可以使用-webkit-appearance,聚焦时候默认样式的取消是-webkit-tap-highlight-color.看到一些移动端

样式重置

嗯,浏览器一般会设置,默认样式,对于,我们来说,这样很不方便,所以就有了样式重置. 接下来我推荐两个样式重置的  小东西 resert 我这里附上当前最新的版本,如有需要可以直接去,resert.com,下载 /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, ifr

css基础样式重置,浏览器样式统一及IE下样式优化

/*样式重置*/ body,dl,dd,h1,h2,h3,h4,h5,h6,p,form{margin:0;} ul,ol{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{font-weight:400;} input:focus,button:focus{outline:none;} a:focus{outline:none;} /*基础样式*/ body{font-family:"Microsoft Yahei";color:#000;font-siz

分享一下自己在用的CSS样式重置代码

通过借鉴网上大牛们的经验和自己在工作中碰到的一些问题,总结出了这些比较常用的CSS样式重置的代码: @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html{ color: #000; background: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 100%; } /* IE6对positon:fixed的单独处

css reset样式重置

1.自己积累的样式重置: form{margin:0;}input{margin:0;padding:0;}select{margin:0;}textarea{margin:0; padding:0;resize:none; overflow:auto; outline:none;} th,td{padding:0;}/*表格其它无默认样式,只有单元格有padding*/ table{border-collapse:collapse;}/*合并边框间距*/ 默认元素在不同浏览器中的margin值

移动端页面默认样式重置

1.-webkit-tap-highlight-color -webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0,去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android) -webkit-tap-highlight-color:rgba(255,0,0,0.5);   //利用此属性,设置touch时链接区域高亮为50%的透明红,只在ios上起作用.android上只要使用了此属性就表现为边框.在body上加此属性,这