CSS/Compass修改placeholder的文字样式

在HTML5中，<input>与<textarea>标签支持placeholder属性，用来定义无任何输入时的默认文字。

可以通过CSS修改placeholder的文字样式：

input[type="text"]:-moz-placeholder,
input[type="text"]::-moz-placeholder,
input[type="text"]:-ms-input-placeholder,
input[type="text"]::-webkit-input-placeholder {color: #999999;font-size: 14px;
}

如果使用Sass和Compass，可以更方便地设置placeholder的样式：

input[type="text"] {@include input-placeholder {color: #999999;font-size: 14px;}
}

其中，@mixin input-placeholder的源码如下：

@mixin input-placeholder {@include with-each-prefix(css-placeholder, $input-placeholder-support-threshold) {@if $current-prefix == -webkit {&::-webkit-input-placeholder {@content;}}@else if $current-prefix == -moz {// for Firefox 19 and below@if support-legacy-browser("firefox", "4", "19", $threshold: $input-placeholder-support-threshold) {&:-moz-placeholder {@content;}}// for Firefox 20 and above&::-moz-placeholder {@content;}}@else if $current-prefix == -ms {&:-ms-input-placeholder {@content;}}}// This is not standardized yet so no official selector is generated.
}

分析源码，可以知道Compass如何根据前缀实现webkit、firefox、IE的跨浏览器兼容，以及如何根据版本号实现firefox低版本的兼容。

其中有一项不常用到的技术为@content。@include input-placeholder在调用时，没有使用常见的(参数)方式，而是使用了{CSS 规则}方式。@content允许在@minxin中插入传入的CSS规则。就上例而言，为：

color: #999999;
font-size: 14px;

参考：

Compass - CSS3 - User Interface

sass语法中的@content

转载于:https://www.cnblogs.com/gymmer/p/6883463.html

CSS/Compass修改placeholder的文字样式相关推荐

图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式
在页面布局时经常会用到input输入框,有时为了提示用户输入正确的信息,需要用placeholder属性加以说明.这篇文章就和大家讲讲placeholder属性怎么用以及如何修改placeholder ...
小程序 rich-text 修改图片和文字样式
小程序 rich-text 修改图片和文字样式 utils文件 /*** 处理富文本里的图片宽度自适应* 1.去掉img标签里的style.width.height属性* 2.img标签添加style ...
CSS如何修改placeholder样式
项目用经常遇到修改input的placeholder的颜色的需求,这里来看一下placeholder如何用css设置: 原文发布与我的个人博客>> 首先来看一下chrome默认的input ...
安卓开发：修改app的文字样式
我所理解最深沉的爱莫过于我活成了你的样子 ...
html 修改placeholder,修改input placeholder样式
有时需要修改placeholder的文字颜色,需要用使用 input::-webkit-input-placeholder 选中,然后进行样式设置input::-webkit-input-placeh ...
autocad不能画图_Autocad中的文字样式及标注样式设置
我刚开始工作的时候,主任就安排我出去设代了,刚好运气很不错,遇上了善解人意的业主.热心助人的跟审.技术强大的后方以及没那么事逼的施工方,小日子总的来说过的不错.但是有一天突然接到电话,让我五天之内出一 ...
css 修改placeholder颜色 , placeholder的样式设置
在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...
CSS(二)文字样式
CSS之文字样式一.文本颜色:color 二.缩进:text-indent 三.行高:line-height 四.字母间隔:letter-spacing 五.水平对齐:text-align 六.文本 ...
html 在盒子中字体垂直,第五章,css行内盒模型和文字样式
一,盒模型发现默认样式,会破坏布局,比如p标签的默认样式 p标签默认样式从图片中我们可以看到我们并没有加margin值,可是左边依然有空隙出现,这就是p标签的默认样式,那我们怎么去掉一些会破坏我们 ...

CSS/Compass修改placeholder的文字样式

CSS/Compass修改placeholder的文字样式相关推荐

最新文章

热门文章