我们在写表单的时候,经常需要自定义表单的样式,当然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. [Abp vNext 源码分析] - 6. DDD 的应用层支持 (应用服务)

    一.简要介绍 ABP vNext 针对于应用服务层,为我们单独设计了一个模块进行实现,即 Volo.Abp.Ddd.Application 模块. PS:最近博主也是在恶补 DDD 相关的知识,这里推 ...

  2. File文件类

    目录 File文件类 File类的构造方法 File类的创建功能 File类的重命名 File类的删除功能 File类的判断功能 File类的获取功能 文件名称过滤器 File文件类 File:文件和 ...

  3. Java网络和代理

    Java网络和代理 1)简介 在当今的网络环境中,特别是企业网络环境中,应用程序开发人员必须像系统管理员一样频繁地处理代理.在某些情况下,应用程序应该使用系统默认设置,在其他情况下,我们希望能够非常严 ...

  4. Jquery 小结

    1. 名词解释 实例对象:var p1=new Person();  p1就是实例对象 构造:function Person(){} 原型对象:在 JavaScript 中,每当定义一个对象(函数也是 ...

  5. solr配置分词器

    一.solr4.10 + mmseg4j-2.2.0分词器 1.solr的安装部署:http://www.cnblogs.com/honger/p/5876289.html,注意不同的版本安装方式可能 ...

  6. 第四章-使用本机文件对话框和帮助进程间沟通 | Electron实战

    本章主要内容: 使用Electron的dialog模块实现一个本机打开文件对话框 促进主进程和渲染器进程之间的通信 将功能从主进程暴露给渲染器进程 使用Electron的remote模块从主进程导入功 ...

  7. 【Java】You have an error in your SQL syntax ...

    详情如下: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server v ...

  8. 【iOS】Ineligible Devices || “无法下载应用程序”

    今天遇到了这个问题,Xcode 显示如图所示: 还有真机测试无法安装的问题,如图: 究其原因,都是 版本不匹配 的问题!在 Xcode 中的 PROJECT 和 TARGETS 设置下版本就行了,如下 ...

  9. 又一个轮子--QMapper

    1 前言 我喜欢造轮子,一是造的时候就是深刻学习的时候,二是造着造着,说不定某天比世面上的其它轮子都要好呢.比如造过Networksocket,也造过WebApiClient,现在我也要造一个Mapp ...

  10. codeforces 318 A.Even Odds B.Sereja and Array

    A.Even Odds 给你n和k, 把从1到n先排奇数后排偶数排成一个新的序列,输出第k个位置的数. 比如 10 3  拍好后就是 1 3 5 7 9 2 4 6 8 10   第3个数是5. // ...