button统一设计只使用css实现

最新推荐文章于 2022-08-12 22:13:07 发布

yhjhoo

最新推荐文章于 2022-08-12 22:13:07 发布

阅读量446

点赞数

文章标签： button css input xhtml scroll html

本文链接：https://blog.csdn.net/yhjhoo/article/details/4006559

版权

首先申明这个解决方案是通过CSDN上发问得来的，所以在在CSDN上发问还是很有帮助的。

问题由来，button里面的字数太多，导致在IE里面严重变形，所以需要设计一种button的样式，原来我能想到的只有两种：

一种就在在每个input标记里面加入class属性，看了看input标签的数量和页面的数量，这个打算我放弃了；

另外一种就是在css属性里面定义input，但是这样以来所有的input属性就全部变了。

废话少说，一下是本次的解决方案代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
input[type=button]{
    background:#FFFFFF none repeat scroll 0 0;
    border:1px solid #DCDDDD;
    color:#1E50A2;
    display:inline-table;
    float:left;
    margin:5px 4px 0 0;
    padding:2px 4px 1px 3px;
    text-align:center;
    vertical-align:middle;
}
input[type=button]:hover{
    background:#1e50a2;
    color:#fff;
}
</style>
</head>

<body>
<input type="button" value="button"/>
<input type="reset" value="reset"/>
<input type="submit" value="submit"/>
<input type="text" value="text"/>
</body>
</html>