css样式之input输入框默认样式
帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用(代码和效果图就就不粘出来了)。
查资料后才知道html的许多标签都有一些默认的属性,这次遇到的是input标签的默认属性(点击输入框时会出现 "蓝色边框" )。话不多说,解决方法如下:
一、直接给input标签加一个online:none的样式
<style>
input {
outline:none;
}
</style>
二、直接控制input标签聚焦是不出现默认边框(原文链接:https://blog.csdn.net/yike_dc/article/details/76928479)
<style>
input:focus{ outline:none; }
</style>
css样式之input输入框默认样式的更多相关文章
- Chrome中输入框默认样式移除
Chrome中输入框默认样式移除 在chrome浏览器中会默认给页面上的输入框如input.textarea等渲染浏览器自带的边框效果 IE8中效果如下: Chrome中效果如下: 这在我们未给输 ...
- css去除webkit内核的默认样式
做移动端的朋友应该知道,iphone的默认按钮是个很恶心的圆角,select下拉框也有默认样式无法修改. 这时候可以用到 -webkit-appearance:none //去除默认样 在按钮和sel ...
- 修改input输入框的样式
直接上代码 <style> .input{ -web-kit-appearance:none; -moz-appearance: none; font-size:1.4em; height ...
- html5中如何更改、去掉input type默认样式
1.如何去掉input type=date 默认样式 HTML代码: 选择日期:<input type="date" value="2017-06-01" ...
- css修改select下拉列表的默认样式
select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...
- CSS消除button标签的默认样式
button{ /*消除button的默认样式*/ /*这种写法是对所有的button标签同时生效*/ margin: 0px; padding: 0px; /*自定义边框*/ border: 0px ...
- (谷歌浏览器等)解决css中点击input输入框时出现外边框方法【outline:medium;】
问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:
- Chrome 下input的默认样式
一.去除默认边框以及padding border: none;padding:0 二.去除聚焦蓝色边框 outline: none; 三.form表单自动填充变色 1.给input设置内置阴影,至少要 ...
- 去除input的默认样式
input, button, select, textarea { outline: none; -webkit-appearance: none; border-radius: 0; } outli ...
随机推荐
- 课上补做:用C语言编程实现ls命令
课上补做:用C语言编程实现ls命令 一.有关ls ls :用来打印当前目录或者制定目录的清单,显示出文件的一些信息等. ls -l:列出长数据串,包括文件的属性和权限等数据 ls -R:连同子目录一同 ...
- 禅知Pro 1.6 前台任意文件读取 | 代码审计
禅知 Pro v1.6 前台任意文件读取 | 代码审计 蝉知专业版是基于蝉知企业门户系统开源版开发,继承了蝉知本身的优秀功能.相对于蝉知开源版增强了商品的属性自定义.属性价格定制.物流跟踪.微信支付. ...
- Ehcart整合百度地图
最近上班有些时间,学习了一下Ehcart的知识,自己制作了一份Ehcart整合百度地图的示例代码. GItHub地址:https://github.com/TianYanFd/tianjin-powe ...
- Docker CMD in detail
CMD CMD 指令就是用于指定默认的容器主进程的启动命令的,我们直接 docker run -it ubuntu 的话,会直接进入 bash.我们也可以在运行时指定运行别的命令,如 docker r ...
- Skyline TerraExplorer 7.0- 扩展信息树
Skyline TerraExplorer V7增加了一个扩展信息树的控件TEInformationWindowEx. 该控件能够将TE3DWindowEx窗口里面的对象显示为信息树的方式.TEIn ...
- FTP学习笔记
FTP有两个连接方式 1.控制连接 2.数据连接 控制链接 标准端口为21 用于数据传输中的控制 数据连接 标准端口20 用于数据传输中的上传 下载数据 数据传输的连接方式,主动连接 被动连接. ...
- Comparator与Comparable,自定义排序和类比较器,TreeSet对象排序
/** * 学生类 * @author Administrator * */ public class Student { private String sno ; private String sn ...
- leetcode每日刷题计划-简单篇day6
突发奇想&胡思乱想的一天 银行家算法证明错了并挂在黑板上的可怜希希 Num 53 最大子序和 Maximum Subarray O(n)的算法实现了,分治法有空补 class Solution ...
- js动态监听dom变化
原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀 var MutationObserver = window.MutationO ...
- 用原生js简单模仿angular的依赖注入
大家都知道angular 依赖注入很神奇,跟我们平常写代码的风格思维差别很大,不过仔细分析确是一个很有意思的东西,依赖注入早期也叫依赖倒置,是java中有的.废话不多少直接上例子 本帖属于原创,转载请 ...