Despite setting the border to 0 and border-style to none, I am still seeing a border around my inputs. Even more confusing is that when I try to add a border, the original border appears on top of it. It seems like this issue may be related to the input size being less than 4, but regardless, I would like to remove it entirely or at least set a consistent color if I can't delete the original border.
I have tried various combinations:
- Setting border to 0
- Setting border-style to none
- Setting border-color to white (which had unexpected results)
<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">
-
</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;
}
As demonstrated in the code above, with the borders of the inputs set to 4px, the original border that I cannot seem to get rid of appears above the custom borders. My goal is actually to have no borders at all, and I only included the border: 4px; example for illustrative purposes.