帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给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. ring0与ring3通信方式

    修改自: https://blog.csdn.net/wzsy/article/details/54929726 控制码方式详解: https://www.cnblogs.com/lsh123/p/7 ...

  2. 转:Eclipse中web项目部署至Tomcat步骤

    原址:http://blog.csdn.net/lucklq/article/details/7621807 Eclipse的web工程至Tomcat默认的部署目录是在工程空间下,本文旨在将部署目录改 ...

  3. CSS3之实现光润效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 微信小程序学习 一

    1. 目录结构 app.js  —— 必须配置Page({})  在新版本中 app.json  —— 注册,路由不用加后缀,是将整个文件里面的四个文件都注册进去,并且做关联,所以在页面中就不需要引用 ...

  5. eclipse启动tomcat正常,但是debug启动报错FATAL ERROR in native method:JDWP No transports initialized,jvmtiError=AGENT_ERROR_TRANSPORT_INIT(197) ERROR: transport error 202: connect failed:Connection timed out

    FATAL ERROR in native method:JDWP No transports initialized,jvmtiError=AGENT_ERROR_TRANSPORT_INIT(19 ...

  6. 今日、本周、本月时间列表 python方法

    def get_time(self): ''' @author : Cong @Email : 624420781@qq.com @描 述 : 生产时间列表 ''' # 生成本日时间列表 i = da ...

  7. Django04-模板系统Template

    一.模板支持的语法 Django模板中只需要记两种特殊符号: {{ }}表示变量,在模板渲染的时候替换成值{% %}表示逻辑相关的操作. 二. 变量(使用双大括号来引用变量) 1.语法格式:{{var ...

  8. SnowFlake学习

    分布式系统中生成全局唯一且趋势递增ID UUID - 太长,无序,数据库插入分裂性能不行 利用数据库自增序列,等步长生成 - 依赖数据库 SnowFlake:使用见下图 抄代码 https://www ...

  9. WPF 学习笔记

    依赖属性(Dependency Property) 相比较于普通属性,依赖属性有以下特点: 变化通知(change notification) 节省内存 使用某种带优先级决定策略(resolution ...

  10. vscode垂直选中列选中

    VSCode列选择快捷键:Alt+Shift+左键