如何移除Submit与Reset按钮的hover效果并取消点击放大样式

要让Submit和Reset按钮不受hover、focus样式影响，直接用CSS的:not()伪类排除这两种类型的input即可，具体修改如下：

修改后的CSS代码 #

input:not([type="submit"]):not([type="reset"]):focus{
    background-color: yellow;
    height: 40px;
    width: 280px;
    color: blue;
    font-size: 24px;
}
input:not([type="submit"]):not([type="reset"]):hover{
    background-color: cyan;
    height: 40px;
    width: 280px;
    color: red;
    font-size: 24px;
}

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>CSS rules</title>

    <style>
input:not([type="submit"]):not([type="reset"]):focus{
    background-color: yellow;
    height: 40px;
    width: 280px;
    color: blue;
    font-size: 24px;
}
input:not([type="submit"]):not([type="reset"]):hover{
    background-color: cyan;
    height: 40px;
    width: 280px;
    color: red;
    font-size: 24px;
}
    </style>
</head>

<body>

    <form action="">

        <table>
            <tr>
                <td>Last Name:</td>
                <td>
                    <input type="text" id="LastName" />
                </td>
            </tr>

            <tr>
                <td>First Name:</td>
                <td>
                    <input type="text" id="FirstName"/>
                </td>
            </tr>

            <tr>
                <td>E-mail Address :</td>
                <td>
                    <input type="password" id="Email"/>
                </td>
            </tr>

            <tr>
                <td>
                    <input type="submit"/>
                </td>

                <td>
                    <input type="reset"/>
                </td>
            </tr>
        </table>

    </form>
</body>
<!--body tag ends here-->
</html>
<!--html tag ends here-->

原理很直接：:not([type="submit"])排除所有type为submit的input，:not([type="reset"])排除reset类型的，两者组合后，只有文本框、密码框这类输入元素会触发hover和focus样式，按钮保持默认外观。

内容的提问来源于stack exchange，提问作者Aldo 01