帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给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输入框默认样式的更多相关文章

  1. Chrome中输入框默认样式移除

    Chrome中输入框默认样式移除 在chrome浏览器中会默认给页面上的输入框如input.textarea等渲染浏览器自带的边框效果 IE8中效果如下: Chrome中效果如下:   这在我们未给输 ...

  2. css去除webkit内核的默认样式

    做移动端的朋友应该知道,iphone的默认按钮是个很恶心的圆角,select下拉框也有默认样式无法修改. 这时候可以用到 -webkit-appearance:none //去除默认样 在按钮和sel ...

  3. 修改input输入框的样式

    直接上代码 <style> .input{ -web-kit-appearance:none; -moz-appearance: none; font-size:1.4em; height ...

  4. html5中如何更改、去掉input type默认样式

    1.如何去掉input type=date 默认样式 HTML代码: 选择日期:<input type="date" value="2017-06-01" ...

  5. css修改select下拉列表的默认样式

    select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...

  6. CSS消除button标签的默认样式

    button{ /*消除button的默认样式*/ /*这种写法是对所有的button标签同时生效*/ margin: 0px; padding: 0px; /*自定义边框*/ border: 0px ...

  7. (谷歌浏览器等)解决css中点击input输入框时出现外边框方法【outline:medium;】

    问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:

  8. Chrome 下input的默认样式

    一.去除默认边框以及padding border: none;padding:0 二.去除聚焦蓝色边框 outline: none; 三.form表单自动填充变色 1.给input设置内置阴影,至少要 ...

  9. 去除input的默认样式

    input, button, select, textarea { outline: none; -webkit-appearance: none; border-radius: 0; } outli ...

随机推荐

  1. Zabbix调优不完全指南(https://www.jianshu.com/p/2d911d55448f)

    从学习搭建zabbix到完成各类监控.调优.二次开发已经过去了两年,期间通过QQ学习群.zabbix官方社区.各个技术博客整理学习了不少关于各种报错的处理方法,现在将常见的一些报错处理方法整理出来分享 ...

  2. 基于墨刀实现的购物app

    在观察研究购物app后 仔细分析总结了几个基础功能,实现如下的界面: 主界面:购物app的推荐界面,提供各式的样品,将整个app的多种功能进行展示. 推荐分类:根据用户浏览的宝贝,对用户进行合理推荐. ...

  3. Pandas学习笔记(三)

    (1)系列对象( Series)基本功能 编号 属性或方法 描述 1 axes 返回行轴标签列表. 2 dtype 返回对象的数据类型(dtype). 3 empty 如果系列为空,则返回True. ...

  4. Supervisor配置

    Supervisor(http://supervisord.org/)是用Python开发的一个client/server服务,是Linux/Unix系统下的一个进程管理工具,不支持Windows系统 ...

  5. vs2015 iis express启动不了及安装DotNetCore.1.0.0-VS2015Tools.Preview2失败的解决方法

    直接用管理员账户打开cmd,进入exe所在的文件夹在运行命令DotNetCore.1.0.0-VS2015Tools.Preview2.exe SKIP_VSU_CHECK=1不要加引号. PS:如果 ...

  6. python request 请求https verify=False时warning

    import requests from requests.packages.urllib3.exceptions import InsecureRequestWarning requests.pac ...

  7. sqlserver2012 数据库差异备份恢复 记录

    sqlserver2012恢复过程: 先恢复全备份,再恢复差异,注意:勾选NoRecovery选项. 恢复完成后,出现: Sqlserver数据库 一直显示“正在还原…” 的状态. 引用:http:/ ...

  8. 嵌入式linux——点亮led灯(二)

    刚才在jz2440板子上写了一个点亮中间led的程序,前前后后十几分钟才好.最终代码 本节内容: 1. 汇编点灯 2. C点灯 3. 参数选择点灯 4. 按键点灯 1. 汇编点灯 .text .glo ...

  9. Synchronized总结

    一.synchronized加锁原理 synchronized可以保证方法或者代码块在运行时,同一时刻只有一个线程可以进入到临界区,同时它还可以保证共享变量的内存可见性. Java中每一个对象都可以作 ...

  10. 【活动发布】捷微H5-微信新年砍价活动,开源发布了

    活动名称: 微信新年砍价 适用项目: 捷微H5活动平台源码下载:http://yun.jeecg.org/pmall/detail/924D63E4F73B4387B75DE9B8545136C5 视 ...