button統一設計 只使用css實現

來源:互聯網
上載者:User

首先申明這個解決方案是通過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>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.