我们在写表单的时候,经常需要自定义表单的样式,当然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啦;

    

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

  1. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

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

    css样式重置 方法一:不推荐使用,这么写会让网页解析速度变慢. *{ margin: 0; padding: 0;} 方法二:大家常用的写法,比较流行. body, html, div, block ...

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

    通过借鉴网上大牛们的经验和自己在工作中碰到的一些问题,总结出了这些比较常用的CSS样式重置的代码: @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响,添 ...

  4. 常见网站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, ...

  5. 非常好用的CSS样式重置表

    非常好用的CSS样式重置表           我们在项目前期准备时都会准备好一个reset.css,因为不同浏览器对标签的解析各不相同,重置css样式可以让标签在不同浏览器下产生相同的效果.所以一个 ...

  6. [CSS] input样式定制

    input样式 定制一个泥团input,想怎么捏就怎么捏 appearance: none 所有主流浏览器都不支持 appearance 属性. Firefox 支持替代的 -moz-appearan ...

  7. ios下表单disabled样式重置

    在做最近的一个活动项目时,需要用到表单的disabled状态,但是在IOS下那颜色不是一般的浅,就跟没有一样,一开始通过如下样式重置: input:disabled, input[disabled]{ ...

  8. css样式重置 移动端适配

    css  默认样式重置 @charset "utf-8"; *{margin:0;padding:0;} img {border:none; display:block;} em, ...

  9. css样式重置,不建议用通配符

    由于各个浏览器对css样式的默认样式不一致,所以有必要进行样式重置.在网上看到很多建议使用 *{margin:0;padding:0} 重置margin和padding.建议不这样子使用,原因主要是性 ...

随机推荐

  1. TestNG的静态方法mock的步骤

    最近团队内部对程序中使用大量的`静态方法`,而公司要求要有sonar扫描覆盖率的,因为在大量使用静态方法的地方若不mock,则覆盖率达不到.于是网上很少的文章讲解对静态方法的mock,大多都是如何使用 ...

  2. nginx解析漏洞复现

    nginx解析漏洞复现 一.漏洞描述 该漏洞与nginx.php版本无关,属于用户配置不当造成的解析漏洞 二.漏洞原理 1. 由于nginx.conf的如下配置导致nginx把以’.php’结尾的文件 ...

  3. 个人永久性免费-Excel催化剂功能第99波-手机号码归属地批量查询

    高潮过往趋于平静,送上简单的手机号码归属地查询,因接口有数量限制,仅能满足少量数据需求,如有大规模数据却又想免费获得,这就成为无解了,数据有价,且用且珍惜. 业务使用场景 除了日常自带的手机各种管家为 ...

  4. 关于Redis的几件小事 | 高并发和高可用

    如果你用redis缓存技术的话,肯定要考虑如何用redis来加多台机器,保证redis是高并发的,还有就是如何让Redis保证自己不是挂掉以后就直接死掉了. redis高并发:主从架构,一主多从,一般 ...

  5. [小米OJ] 5. 找出旋转有序数列的中间值

    排序,输出 #include <bits/stdc++.h> using namespace std; int main() { string input; while (cin > ...

  6. html+css test1

    模拟实验楼提供的一个网页.. [可由 git clone https://github.com/shiyanlou/finaltest 获取相关图片素材] <!DOCTYPE html>& ...

  7. Java面试题 从源码角度分析HashSet实现原理?

    面试官:请问HashSet有哪些特点? 应聘者:HashSet实现自set接口,set集合中元素无序且不能重复: 面试官:那么HashSet 如何保证元素不重复? 应聘者:因为HashSet底层是基于 ...

  8. linux初学者-软件安装与管理篇

    linux初学者-软件安装与管理篇 在linux的学习和工作中需要安装许多的软件.在redhat的linux操作系统下,软件一般都是rpm格式的.以下将介绍一些软件安装和管理的内容. 1.软件名称 在 ...

  9. hdu多校第八场Parentheses Matrix

    #include<bits/stdc++.h> using namespace std; ][]; int main() { int t; scanf("%d",&am ...

  10. 《CSS3知识点》

    一.引入样式 1.行内样式表 <h1 style="color: red;font-size: 18px;">10-30</h1> 2.内部样式表(在hea ...