Question 45125 in Html Question posted in
Some basic documentation can be found here.

How to remove hover from Submit and Reset Button – Html

What command do i need to use to don’t make it zoom when i click "submit" or "reset" button. I want them just to look normal. i am supposed to use hover for this program but not for the last 2 buttons

Please see code below of what i have so far. anything is appreciated

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

    <style>
input:focus{
    background-color: yellow;
    height: 40px;
    width: 280px;
    color: blue;
    font-size: 24px;
}
input: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-->

Tried playing with the code but i can’t figure it out

Tags:

3

Answers


  1. 0 
    <!DOCTYPE html>
<html>
<head>
    <title>CSS rules</title>

    <style>
input[type="text"]:hover, input[type="password"]:hover {
    background-color: yellow;
    height: 40px;
    width: 280px;
    color: blue;
    font-size: 24px;
}
input[type="text"]:focus, input[type="password"]:focus {
    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-->

    Changed the way you call the style. By passing in the [type=text] in CSS, you make sure that only type=text and type=password pick up the styles, and making the submit and the reset button not pick up the styles.

    Login or Signup to reply.
  2. 0

    You’ll need to add default style for when it’s not hovering or in focus. Try adding this to your the area between your style tags:

    input {
    background-color: black;
    height: 40px;
    width: 280px;
    color: white;
    font-size: 24px;
}

    If that’s not what you intended, Yash Digant Joshi may have a better answer.

    Login or Signup to reply.
  3. 0

    Add hover effect on input which is not submit or reset.

    :where(input:not([type="submit"]):not([type="reset"])):hover
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search