简明现代魔法 -> CSS层叠样式表 -> 类似按钮的表单 CSS

类似按钮的表单 CSS

2010-03-13

先总结一个经验，关于 CSS 的选择符的问题：

• class 对应 '.' 选择符，比如：

.sbutton{
	margin: 0;
	padding: 0 2px 0 2px;
	background-color:white;
}

<input type="submit" class="sbutton" value="Test" />

• id 对应 '#' 选择符，比如：

#sbutton{
	margin: 0;
	padding: 0 2px 0 2px;
	background-color:white;
}

<input type="submit" id="sbutton" value="Test" />

然后我们再来设计类似按钮的 Form 表单吧。演示效果如下：

CSS code 如下：

form{margin:0px}

input{
	border:1px solid #808080;
}

.sbutton{
	margin: 0;
	padding: 0 2px 0 2px;
	background-color:white;
}