Why is there a border around my inputs when I set the border to 0? (CSS)

Issue

I set the border to 0, and the border-style to none, but there is still a border around my inputs. Even weirder; when I add a border, the original border appears above the border I created. This may be because the size of all my inputs is less than 4, but either way I would like to delete it, or at least set a consistent color, if the og border cannot be deleted

I set the border to 0 I set border-style to none I set border-color to white (which messed a lot of stuff up for some reason)

<div class="time-container" align="center">
    <div id="start" align="middle">

                    <h2 class="start-time">start</h2>

            <div class="time">
                    <form class="hour">
                        <input type="text" size="3" maxlength="3" placeholder="hr">
                    </form>
                    :
                    <form class="min">
                        <input type="text" size="3" maxlength="2" placeholder="min">
                    </form>
                    :
                    <form class="sec">
                        <input type="text" size="3" maxlength="2" placeholder="sec">
                    </form>
            </div>

                    <h3></h3>

    </div>



            <div class="hyphen">
                &#45;
            </div>



    <div id="stop" align="middle">

                    <h2 class="end-time">end</h2>

            <div class="time">
                    <form class="hour">
                        <input type="text" size="3" maxlength="3" placeholder="hr">
                    </form>
                    :
                    <form class="min">
                        <input type="text" size="3" maxlength="2" placeholder="min">
                    </form>
                    :
                    <form class="sec">
                        <input type="text" size="3" maxlength="2" placeholder="sec">
                    </form>
            </div>

                    <h3></h3>
    </div>
</div>



h2 {
    margin-top: 20px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
    text-align: left;
    color: gray;
    font-size: 16px;
    font-weight: normal;
    width: 131px;
}

.min, .sec, .hour {
    font-family: 'Roboto', sans-serif;
    width: 33px;
    box-sizing: border-box;
    border: 4px solid #ccc;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: white;
    display: inline-block;
}

h3{
    border-top: 2px solid #ccc;
    width: 131px;
}

.time-container {
    display: flex;
    width: 100%;
    align-self: center;
    justify-content: center;
}

.hyphen {
    color: #ccc;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: bold;
    align-self: center;
    margin: 0 5%;
    padding-top: 20px;
}

This is the code with the borders of the inputs set to 4px. You can see that the original border, something I can't find a way to remove, shows up ABOVE my custom borders. p.s. I wish to have no borders at all, I was simply showing the border: 4px; example to better illustrate this issue.

Solution

Use border: none; to the input.

If you want to remove the border also on :focus use input:focus{ border:none;outline:0; }

.min input, .sec input, .hour input{
border: none;
}
.min input:focus, .sec input:focus, .hour input:focus{
border: none;
outline:0;
}
h2 {
    margin-top: 20px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
    text-align: left;
    color: gray;
    font-size: 16px;
    font-weight: normal;
    width: 131px;
}

.min, .sec, .hour {
    font-family: 'Roboto', sans-serif;
    width: 33px;
    box-sizing: border-box;
    border: none;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: white;
    display: inline-block;
}

h3{
    border-top: 2px solid #ccc;
    width: 131px;
}

.time-container {
    display: flex;
    width: 100%;
    align-self: center;
    justify-content: center;
}

.hyphen {
    color: #ccc;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: bold;
    align-self: center;
    margin: 0 5%;
    padding-top: 20px;
}

<div class="time-container" align="center">
    <div id="start" align="middle">

                    <h2 class="start-time">start</h2>

            <div class="time">
                    <form class="hour">
                        <input type="text" size="3" maxlength="3" placeholder="hr">
                    </form>
                    :
                    <form class="min">
                        <input type="text" size="3" maxlength="2" placeholder="min">
                    </form>
                    :
                    <form class="sec">
                        <input type="text" size="3" maxlength="2" placeholder="sec">
                    </form>
            </div>

                    <h3></h3>

    </div>



            <div class="hyphen">
                &#45;
            </div>



    <div id="stop" align="middle">

                    <h2 class="end-time">end</h2>

            <div class="time">
                    <form class="hour">
                        <input type="text" size="3" maxlength="3" placeholder="hr">
                    </form>
                    :
                    <form class="min">
                        <input type="text" size="3" maxlength="2" placeholder="min">
                    </form>
                    :
                    <form class="sec">
                        <input type="text" size="3" maxlength="2" placeholder="sec">
                    </form>
            </div>

                    <h3></h3>
    </div>
</div>

Answered By - לבני מלכה