button统一设计 只使用css实现

xiaoxiao2024-03-27  25

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

问题由来,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>

转载请注明原文地址: https://www.6miu.com/read-5014563.html

最新回复(0)