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啦;
input样式重置(outline:none)的更多相关文章
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- css扁平化博客学习总结(二)css样式重置
css样式重置 方法一:不推荐使用,这么写会让网页解析速度变慢. *{ margin: 0; padding: 0;} 方法二:大家常用的写法,比较流行. body, html, div, block ...
- 分享一下自己在用的CSS样式重置代码
通过借鉴网上大牛们的经验和自己在工作中碰到的一些问题,总结出了这些比较常用的CSS样式重置的代码: @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响,添 ...
- 常见网站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, ...
- 非常好用的CSS样式重置表
非常好用的CSS样式重置表 我们在项目前期准备时都会准备好一个reset.css,因为不同浏览器对标签的解析各不相同,重置css样式可以让标签在不同浏览器下产生相同的效果.所以一个 ...
- [CSS] input样式定制
input样式 定制一个泥团input,想怎么捏就怎么捏 appearance: none 所有主流浏览器都不支持 appearance 属性. Firefox 支持替代的 -moz-appearan ...
- ios下表单disabled样式重置
在做最近的一个活动项目时,需要用到表单的disabled状态,但是在IOS下那颜色不是一般的浅,就跟没有一样,一开始通过如下样式重置: input:disabled, input[disabled]{ ...
- css样式重置 移动端适配
css 默认样式重置 @charset "utf-8"; *{margin:0;padding:0;} img {border:none; display:block;} em, ...
- css样式重置,不建议用通配符
由于各个浏览器对css样式的默认样式不一致,所以有必要进行样式重置.在网上看到很多建议使用 *{margin:0;padding:0} 重置margin和padding.建议不这样子使用,原因主要是性 ...
随机推荐
- 你可能不知道的github的秘密
github也可以使用快捷键 先举例子,如何快速查找项目中的文件? 只需要进入项目,并按下T键 在浏览代码时,如何快速跳到指定行? 只需要进入项目,并按下L键 下面是一些常用的快捷键 聚焦搜索栏 按下 ...
- ES6 symbol 以及symbol的简单应用
前置 1.ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值. 2.Symbol 值通过Symbol函数生成. 3.Symbol 函数可以接受一个字符串作为参数,表示对 Symbol 实 ...
- 浏览器和Node 中的Event Loop
前言 js与生俱来的就是单线程无阻塞的脚本语言. 作为单线程语言,js代码执行时都只有一个主线程执行任务. 无阻塞的实现依赖于我们要谈的事件循环.eventloop的规范是真的苦涩难懂,仅仅要理解的话 ...
- PHP ErrorException 积累
ErrorException [不定时更新] ErrorException1: Undefined index: allocate 描述:PHP默认会对未声明变量进行提示,这种默认的提示是可以进行忽略 ...
- phpcms V9 常用的调用标签
本文介绍phpcms v9中模板标签使用说明. >>调用根目录下phpcms\template\content\header文件 {template "content" ...
- Clock Crossing Adapter传输效率分析 (Latency增加,传输效率降低)
原创By DeeZeng [ Intel FPGA笔记 ] 在用Nios II测试 DDR3时候发现一个现象 (测试为:写全片,读全片+比对) 用单独的PLL产生时钟(200MHz)驱动 Nios I ...
- web设计_2_灵活的文字
最佳设计:可以让用户自由控制任何页面的文字大小. 浏览器中用户都是可以自定义默认的文字大小的,如果使用 px,用户自行在浏览器设置中改变了文字大小后,网页上是不会变化的.我们不能排除视障用户(如近视) ...
- Angular JS 中 指令详解
Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析. 一个Angular js 指令(directive)需要指定一个唯一的名字(myDirective)和一个函数, ...
- http状态码 500-599
类比: 客户端:客人 服务器:便利店 http报文:中文语言+钱 500:服务器内部错误,无法完成请求 客户端:给我一瓶可乐 服务器:对不起,不能给你服务,本店昨天起火烧了 501:服务器不支持请求的 ...
- Nginx配置安装(Mac)
我用到的安装工具是:homebrew 真的很方便! 步骤1: 打开终端,输入 brew info nginx结果:我们可以看到,nginx在本地还未安装(Not installed),nginx的来源 ...