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 ...
随机推荐
- qnx spi 学习笔记
文档还在编辑中,目前排版很乱,边看边写..等写完了编辑 qnx spi 学习 --目前只是看了代码,学的不深入,有错误的地方请联系我 谢谢 spi init spi init应该是分为2条线,一条是 ...
- ionic2 vscode运行调试
一.环境搭建 1,安装ripple模拟器 如果已经注册了淘宝国内镜像使用下面命令 cnpm install -g ripple-emulator 显示结果如下: 2,安装vs code 下载地址htt ...
- 初识git(17/8/21)
git是一个分布式的版本管理系统 通过廖雪峰的官方网站(maybe2017)来学习的,比较详实跟着操作就行,记录基本的一些命令还有学习是遇到的一些问题和收获,方便下次查阅. git的安装 -. win ...
- C4.cpp
结构可以同时存储int ,long double,共用体只能存储int,long,double 共用体能够存储不同的数据类型,但是同时只能存储一种数据类型,因此其长度为最大成员的长度 共用体的一个好处 ...
- 003.[python学习] 简单抓取豆瓣网电影信息程序
声明:本程序仅用于学习爬网页数据,不可用于其它用途. 本程序仍有很多不足之处,请读者不吝赐教. 依赖:本程序依赖BeautifulSoup4和lxml,如需正确运行,请先安装.下面是代码: #!/us ...
- (22/24) webpack实战技巧:静态资源集中输出
工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图.开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片,而在打包时保留这些静态资源,直接打包到指定文件夹中.此时 ...
- LeetCode 100. Same Tree 判断两棵二叉树是否相等 C++
Given two binary trees, write a function to check if they are the same or not. Two binary trees are ...
- 实现自己的HashMap
准备工作 ,实现自己的Map.entry.代码如下 : import java.util.Map;public class MapEntry<K,V> implements Map.Ent ...
- Git常用命令(一)
转自2.1 Git 基础 - 获取 Git 仓库 获取帮助 `$ git help <verb> $ git <verb> --help $ man git-<verb& ...
- 电脑开机出现intel UNDI,PXE-2.1(build 003),是怎么回事?
restore defaults恢复出厂设置 https://jingyan.baidu.com/article/20b68a88587205796cec6290.html