"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > How to Get Rid of the Border on Input Buttons?

How to Get Rid of the Border on Input Buttons?

Published on 2024-12-21
Browse:450

How to Get Rid of the Border on Input Buttons?

Tackling the Border Issue in Input Buttons

As you click on an input button, an unsightly border appears, spoiling the aesthetic appeal. To address this issue, various approaches have been attempted, such as utilizing onfocus: none. However, these efforts have proven futile.

To resolve this persistent problem, a simple solution lies in the realm of CSS. By incorporating outline: none; into your style definition, you can magically erase this unwanted border.

Here's an updated version of the CSS code that will eliminate the border:

input[type=button] {
    width: 120px;
    height: 60px;
    margin-left: 35px;
    display: block;
    background-color: gray;
    color: white;
    border: none;
    outline: none;
}

By applying this CSS rule, the unsightly border will vanish when the input button is clicked. Your button will now showcase a clean, professional appearance.

Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3