关于这边几个样式问题,重点有这么几个:

(1)placeholder="请输入密码"

(2)

color:#BEB6B6;
border:0px;
border-bottom:1px solid #BEB6B6; /* 下划线效果 */
background-color:transparent; /* 背景色透明 */
outline:none;

(3)outline:none  其中这个是定义无轮廓,当元素获得焦点的时候,焦点框为0.

outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。outline 属性设置元素周围的轮廓线。

CSS outline:none
当元素获得焦点的时候,焦点框为0.
比如说当前这个网页,你用tab键切换的时候,文字链接、搜索框、按钮等的外面会有一个虚线框(或高亮框),此时当前的元素就获得了焦点,你可以对它进行操作。
这个功能一般是为使用键盘操作的用户准备的。
有些链接——比如一个图片链接,你不想让他出现虚线框破坏设计感,就可以用此方法。 建议一般不要去掉,只在一些影响设计美感的地方用。毕竟这个焦点框对键盘用户是很有帮助的。 定义和用法
outline-style 属性用于设置元素的整个轮廓的样式。样式不能是 none,否则轮廓不会出现。 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。outline 属性设置元素周围的轮廓线。 注释:请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。 注释:轮廓线不会占据空间,也不一定是矩形。 默认值: none 设置轮廓的样式:
p
{
outline-style:dotted;
}
浏览器支持
所有主流浏览器都支持 outline-style 属性。 只有在规定了 !DOCTYPE 时,Internet Explorer 才支持 outline-style 属性。
可能的值
值 描述 none 默认。定义无轮廓。 dotted 定义点状的轮廓。 dashed 定义虚线轮廓。 solid 定义实线轮廓。 double 定义双线轮廓。双线的宽度等同于 outline-width 的值。 groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 inherit 规定应该从父元素继承轮廓样式的设置。

工作笔记之20170223:①关于Html5的placeholder属性,②以及input的outline:none的样式问题的更多相关文章

  1. html5的placeholder属性(IE如何兼容placeholder属性)

    界面UI推荐 jquery html5 实现placeholder兼容password  IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...

  2. 【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)

    placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...

  3. 让IE下支持Html5的placeholder属性

    HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等. Placeholder 是HTML5新增的另一个属性,当input或者textarea设 ...

  4. HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

    今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...

  5. 转: HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

    今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...

  6. Html5的placeholder属性(IE兼容)

    HTML5对Web Form做了很多增强,比方input新增的type类型.Form Validation等. Placeholder是HTML5新增的还有一个属性,当input或者textarea设 ...

  7. 使用placeholder属性设置input文本框的提示信息

    input文本框中设置提示信息,可以使用placeholder属性 <!DOCTYPE html> <html> <head> <meta charset=& ...

  8. HTML5的placeholder属性如何实现换行

    在HTML5中,placeholder是一个非常有用的属性,当控件中无内容时可以代替UI控件的提示功能,而不需要写额外的代码.但如果有一个textarea控件,我们需要多行的文本提示信息时,使用”\n ...

  9. [干货]兼容HTML5的Placeholder属性-更新版v0.10102013

    HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等.Placeholder是HTML5新增的另一个属性,当input或者textarea设置了 ...

随机推荐

  1. Mybatis-Plus和Mybatis的区别

    1.List item 区别一如果Mybatis Plus是扳手,那Mybatis Generator就是生产扳手的工厂.通俗来讲——MyBatis:一种操作数据库的框架,提供一种Mapper类,支持 ...

  2. Linux 环境下 jar 加解密命令?

    1.源码打jar包 jar -cvf demo-source.jar -C src/ . > log.txt 2.编译字节打jar包 jar -cvf demo-class.jar -C bin ...

  3. html button标签 语法

    html button标签 语法 button标签怎么用? 作用:定义一个按钮. 语法:<button type="button">按钮</button> ...

  4. [算法]概率与期望DP

    前言 前两节主要针对题目分析,没时间的珂以跳过. 初步 首先举一道简单.经典的好题: [Lightoj1038]Race to 1 Again 懒得单独写,安利一下DennyQi同学的博客:https ...

  5. ELK+Filebeat+redis整合

    前面的博客,有具体的ELK安装配置步骤,此处在其基础上修改 修改配置文件并启动 [root@topcheer filebeat-6.2.3-linux-x86_64]# vim filebeat.ym ...

  6. HDU 2923 Relocation(状压dp+01背包)

    题目代号:HDU2923 题目链接:http://poj.org/problem?id=2923 Relocation Time Limit: 1000MS Memory Limit: 65536K ...

  7. BOM和DOM的操作

    到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互.也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DOM相关知 ...

  8. MySQL_DDL操作

    简单的来说DLL就是对数据库的C(Create)R(Retrieve)U(Update)D(Delete) 1.数据库的创建 (1)创建:create database 数据库名:当数据库已经存在则会 ...

  9. MySQL的(@i:=@i+1)用处及用法

    今天写一个为查询的数据排序列号的SQL语句,整理出来下面的笔记: 这是语法:   SELECT (@i:=@i+1),t.* FROM table_name t,(SELECT @i:=0) AS j ...

  10. Spring Data Jpa (二)JPA基础查询

    介绍Spring Data Common里面的公用基本方法 (1)Spring Data Common的Repository Repository位于Spring Data Common的lib里面, ...