How can I make a border color stay the same when interacting with input type="number"?-CodePudding

I'm trying to create a simple timer, and I've just about got the styling the way I want. I plan adding the ability for the user to specify the number of hours, minutes, and seconds they want to set the timer.

My issue arises when I go into the input type=number element to change the number. The border-color is green when these elements aren't being used; however, once I click those elements, the border changes to black. How can I make it stay the same?

body{
    background: #ddd;
    margin: 25px;
}

.timer{
    font-family: sans-serif;
    display: inline-block;
    padding: 24px 32px;
    border-radius: 30px;
    background: white;
}

.timer__btn{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    margin-left: 5px;
    color: white;
    background: #CC02DD;
    cursor: pointer;
}

.timer__btn--start{
    background: #00b84c;
}

.timer__btn--stop{
    background: #ff0256;
}

.timer__part{
    font-size: 1.5rem;
}

.number__select{
    width: 60px;
    margin-top: 10px;
    border-radius: 30px;
    border: solid;
    border-color: #009900;
    text-align: center;
}

/* .number__select{
    border-color: #009900;
} */

.material-symbols-outlined {
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 48;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <script src="countdown.js"></script>
    <title>Countdown Timer</title>
</head>
<body>
    <div >
        <span >00</span>
        <span >:</span>
        <span >00</span>
        <span >:</span>
        <span >00</span>
        <button type="button" >
            <span >
                play_arrow
            </span>
        </button>
        <button type="button" >
            <span >
                restart_alt
            </span>
        </button>
        <div >
            <input type="number"  min="1" max="99">
            <input type="number"  min="1" max="59">
            <input type="number"  min="1" max="59"> 
        </div>
    </div>
</body>
</html>

CodePudding user response：

simply add outline color same as border or * Remove outline

body{
    background: #ddd;
    margin: 25px;
}

.timer{
    font-family: sans-serif;
    display: inline-block;
    padding: 24px 32px;
    border-radius: 30px;
    background: white;
}

.timer__btn{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    margin-left: 5px;
    color: white;
    background: #CC02DD;
    cursor: pointer;
}

.timer__btn--start{
    background: #00b84c;
}

.timer__btn--stop{
    background: #ff0256;
}

.timer__part{
    font-size: 1.5rem;
}

.number__select{
    width: 60px;
    margin-top: 10px;
    border-radius: 30px;
    border: solid;
    border-color: #009900;
    outline:#009900;             **//Simply add outline**
    text-align: center;
}


/* .number__select{
    border-color: #009900;
} */

.material-symbols-outlined {
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 48;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <script src="countdown.js"></script>
    <title>Countdown Timer</title>
</head>
<body>
    <div >
        <span >00</span>
        <span >:</span>
        <span >00</span>
        <span >:</span>
        <span >00</span>
        <button type="button" >
            <span >
                play_arrow
            </span>
        </button>
        <button type="button" >
            <span >
                restart_alt
            </span>
        </button>
        <div >
            <input type="number"  min="1" max="99">
            <input type="number"  min="1" max="59">
            <input type="number"  min="1" max="59"> 
        </div>
    </div>
</body>
</html>

CodePudding user response：

You need to set the element's outline to none

.number__select{ outline: none; }

CodePudding user response：

body{
    background: #ddd;
    margin: 25px;
}

.timer{
    font-family: sans-serif;
    display: inline-block;
    padding: 24px 32px;
    border-radius: 30px;
    background: white;
}

.timer__btn{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    margin-left: 5px;
    color: white;
    background: #CC02DD;
    cursor: pointer;
}

.timer__btn--start{
    background: #00b84c;
}

.timer__btn--stop{
    background: #ff0256;
}

.timer__part{
    font-size: 1.5rem;
}

.number__select{
    width: 60px;
    margin-top: 10px;
    border-radius: 30px;
    border: solid;
    border-color: #009900;
    text-align: center;
}

 .number__select{
    outline:none;
} 

.material-symbols-outlined {
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 48;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <script src="countdown.js"></script>
    <title>Countdown Timer</title>
</head>
<body>
    <div >
        <span >00</span>
        <span >:</span>
        <span >00</span>
        <span >:</span>
        <span >00</span>
        <button type="button" >
            <span >
                play_arrow
            </span>
        </button>
        <button type="button" >
            <span >
                restart_alt
            </span>
        </button>
        <div >
            <input type="number"  min="1" max="99">
            <input type="number"  min="1" max="59">
            <input type="number"  min="1" max="59"> 
        </div>
    </div>
</body>
</html>

Introduction to the outline property

The outline will appear every time you click the element with outline.
The outline property default value will make it appear.

To make the outline disappear, use outline: none;

Note: The commented code is uncommented and edited.