当我将边框设置为 0 时，为什么我的输入周围有边框？ (CSS)

Question

我将边框设置为 0，将边框样式设置为 none，但我的输入框周围仍然有边框。甚至更奇怪；当我添加边框时，原始边框出现在我创建的边框上方。这可能是因为我所有输入的大小都小于4，但无论哪种方式我都想删除它，或者至少设置一个一致的颜色，如果不能删除og边框

我把边框设为0 我将边框样式设置为 none 我将 border-color 设置为白色（出于某种原因，这搞砸了很多东西）

<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 的代码。您可以看到原始边框（我无法找到删除方法）显示在我的自定义边框上方。 p.s。我希望完全没有边框，我只是展示 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>

当我将边框设置为 0 时，为什么我的输入周围有边框？ (CSS)

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

html

css

border