将边框设置为0时，为什么输入周围有边框？ （CSS）

Question

我将border设置为0，border-style设置为none，但是输入周围仍然有边框。甚至更奇怪；当我添加边框时，原始边框显示在我创建的边框上方。这可能是因为我所有输入的大小都小于4，但是如果无法删除og边框，我想将其删除，或者至少设置一致的颜色

我将边框设置为0 我将边框样式设置为无 我将边框颜色设置为白色（由于某种原因，这弄乱了很多东西）

<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;
}

这是将输入边框设置为4px的代码。您会看到原始边框（我找不到的一种删除方法）在我的自定义边框上方显示。 ps。我希望完全没有国界，我只是在展示border: 4px;示例以更好地说明这个问题。

Answer 1

使用border: none;到input。

如果您还想删除:focus上的边框，请使用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>

Answer 2

使用outline: none和border: 0选项作为输入-像这样：

input,
input:focus {
  outline:none;
  border: 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>