我们在写表单的时候,经常需要自定义表单的样式,当然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. Mybatis generator生成工具简单介绍

    Mybatis generator  其主要的功能就是方便,快捷的创建好Dao,entry,xml 加快了开发速度,使用方面根据其提供的规则配置好就OK 这里还有一个重要的开发场景,开发过程中,对数据 ...

  2. linux初学者-磁盘配额篇

    linux初学者-磁盘配额篇 在使用磁盘时,只要有权限,不管什么用户都可以在其中写入数据,但是如果是多人在一个磁盘中写入数据,就会出现争议,如果一个用户将磁盘空间用完,那么其他人无法再使用.如下图所示 ...

  3. java - 进程和线程的区别及联系

    1. 进程 (1)进程主要有两个特征: a. 进程是一个实体,占有一定的地址空间.每一个进程都有它自己的地址空间,一般情况下,包括文本区域(text region).数据区域(data region) ...

  4. IIS短文件名漏洞复现

    IIS短文件名漏洞复现 一.漏洞描述 此漏洞实际是由HTTP请求中旧DOS 8.3名称约定(SFN)的代字符(~)波浪号引起的.它允许远程攻击者在Web根目录下公开文件和文件夹名称(不应该可被访问). ...

  5. Face++实习体验

    旷视Face++ 实习体验 已经在Face++呆了快20天了,自从实习,github和blog也碰的少了,我工作是做聚类(也是头一次接触机器学习,以前想都没敢想的),毕竟工作内容很多都是不熟悉的,需要 ...

  6. 使用secureCRT上传下载

    secureCRT 的 下载 http://pan.baidu.com/s/1c1Mz1ks 下载完成后,输入yum install lrzsz,安装这个东西, 然后就可以直接在secureCRT中输 ...

  7. VM虚拟机Linux系统eth0下面没有inet和inet6

    今天打开虚拟机发现ip有问题,VM虚拟机Linux系统eth0下面没有inet和inet6,明明都是配置好的 打开任务管理器-> 服务-> 打开VM的nat和DHCP和hostd 正常后:

  8. LinkedHashMap的特殊之处

    一.前言 乍眼一看会怀疑或者问LinkedHashMap与HashMap有什么区别? 它有什么与众不同之处?  由于前面已经有两篇文章分析了HashMap,今天就看看LinkedHashMap.(基于 ...

  9. 3. 源码分析---SOFARPC客户端服务调用

    我们首先看看BoltClientProxyInvoker的关系图 所以当我们用BoltClientProxyInvoker#invoke的时候实际上是调用了父类的invoke方法 ClientProx ...

  10. GC是什么?为什么我们要去使用它

    GC(Garbage Collection)是各大语言的宠儿,也是计算机科学领域里很热门的一个话题.最早在JVM中有看过这个算法,后来发现即使是js这种脚本语言也是有GC的.单纯就JVM来说的话,GC ...