我们在写表单的时候,经常需要自定义表单的样式,当然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. LiteDB源码解析系列(3)索引原理详解

    在这一章,我们将了解LiteDB里面几个基本数据结构包括索引结构和数据块结构,我也会试着说明前辈数据之巅在博客中遇到的问题,最后对比mysql进一步深入了解LiteDB的索引原理. 1.LiteDB的 ...

  2. C#的DateTime得到特定日期

    //指定时间 DateTime dt = new DateTime(2016, 6, 1); //当前时间 DateTime dt = DateTime.Now; //本周周一 DateTime st ...

  3. iframe插入视频自动播放代码

    <iframe marginwidth=0 marginheight=0 src='http://www.wsview.com/yzplayerAction!play2.action?autoP ...

  4. 华三F100 系列防火墙 - 浮动路由联动NQA 实现双线路自动切换

    公司 有两条公网线路,一条移动作为日常主用线路,一条联通作为备用线路. 为了实现主备线路自动切换,配置了浮动路由 但浮动路由只能在 主用接口为down状态时才能浮出接管默认路由.如果故障为非物理链路故 ...

  5. 入门webpack,看这篇就够了

    什么是webpack? 官网给出的概念是:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递 ...

  6. redis订阅者与发布者

    #conding=utf-8 #一.创建redis类 文件名 RedisHelper import redis # conn=redis.Redis(host='127.0.0.1')# import ...

  7. Kubernetes容器集群管理环境 - 完整部署(中篇)

    接着Kubernetes容器集群管理环境 - 完整部署(上篇)继续往下部署: 八.部署master节点master节点的kube-apiserver.kube-scheduler 和 kube-con ...

  8. 从无到满意offer,你需要知道的那些事

    本文首发于微信公众号:[坂本先生] 原文地址:从无到满意offer,你需要知道的那些事 1.求职软件/网站汇总 软件 评价 推荐指数 拉钩网 手机端产品设计的比较好,当时在上面找到了很多的面试机会 5 ...

  9. vue-cli3.0创建项目报npm install --loglevel error 踩坑的那把辛酸泪

    创建项目 vue create vue-pro 然后如下图 一开始以为是npm的问题,卸载了Mac的node ,安装nvm,然后再安装node (可参考: Mac中nvm的安装和使用   https: ...

  10. 闯荡Ext-第一篇

    今天在网上找到了一本非常好的书:<Ext江湖>,这本书是由大漠穷秋大神写的,刚看到这本书的时候,心里面的那个激动劲啊,本来原先的时候心里面就一直念叨着想要学习Ext,但是苦于找不到好的资料 ...