标签归档:-moz-

修改输入框placeholder文字默认颜色-webkit-input-placeholder

html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如:

<input type="text" placeholder="我爱北京天安门" value=" ">

默认的placeholder字体颜色是呈浅灰色,如果想改变这个默认颜色,解决方案如下:

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #f00;  
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #f00;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #f00;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #f00;
}

以上代码摘自Bootstrap框架的bootstrap.css

CSS3盒模型box-sizing属性详解,布局更方便

使用方法:

  • box-sizing: content-box;
  • box-sizing: padding-box;
  • box-sizing: border-box;

属性解析:

当设置为content-box时,盒子的宽度和高度同默认宽度(不包括padding,border);

当设置为padding-box时,盒子的宽度和高度包括padding区域;

当时设置为border-box时,盒子的宽度和高度包括padding和border区域;

注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。

样例代码:

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div {
 width: 200px;
 height: 200px;
 background-color: #000;
 color: #fff;
 margin: 30px auto;
 padding: 30px;
 border: 30px solid #f60;
 }
 .box-1 {
 -moz-box-sizing: content-box;
 }
 .box-2 {
 -moz-box-sizing: padding-box;
 }
 .box-3 {
 -moz-box-sizing: border-box;
 }
 </style>
</head>
<body>
 <div class="box-1">content-box</div>
 <div class="box-2">padding-box</div>
 <div class="box-3">border-box</div>
</body>
</html>

样例图片:(ff下测试)

box-sizing属性

 

QQ1

QQ2

QQ3

火狐firefox下按钮去掉虚线框和使文字垂直居中解决方案

在火狐下的input或者button默认显示并没有达到绝对的垂直居中,文字整体居中偏下的位置,而且当点击按钮之后,按钮上会出现一圈虚线,这很影响视觉效果,更重要的是你的设计师要你必须处理掉这两个问题。

解决方案:

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: none;
}

没有使用此解决方案时按钮默认效果如下:

火狐下按钮默认效果

火狐下按钮默认效果

当使用此解决方案之后的效果如下:

火狐下去掉按钮虚线和使文字垂直居中

火狐下去掉按钮虚线和使文字垂直居中

备注:这种解决方案是无意中在twitter前端框架Bootstrap的基础样式表里看到的,遂亲自测试一下,其中虚线框被成功去掉,经过对比文字会较默认位子向上偏移,反正按我要求基本上达到垂直居中了。

 

CSS盒模型全面讲解,怪异模式盒模型,CSS3 box-sizing属性

今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理。

先不考虑css3的情况,盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式

当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE HTML>

以上几种DOCTYPE都是标准的文档类型,无论使用哪种模式完整定义DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式)

首先定义一个div块用来演示标准模式和怪异模式的区别,以下是Css样式

.box {
    width: 200px;
    height: 200px;
    border: 20px solid black;
    padding: 50px;
    margin: 50px;
}

标准模式下的盒模型如下图所示,盒子总宽度/高度=width/height+padding+border+margin

标准模式盒模型

标准模式盒模型

在怪异模式下的盒模型如下图所示,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

怪异模式盒模型

怪异模式盒模型

看到这里你应该对盒模型的两种模式有了清晰的认识,下面在此基础上介绍一下css3属性box-sizing;

box-sizing有两个值一个是content-box,另一个是border-box。

当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;

当设置为box-sizing:border-box时,将采用怪异模式解析计算;

目前使用此属性需要前缀如下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;