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

问题描述 投票：0回答：3

我将边框设置为 0，并将边框样式设置为无，但我的输入周围仍然有边框。更奇怪的是；当我添加边框时，原始边框出现在我创建的边框上方。这可能是因为我所有输入的大小都小于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 的代码。您可以看到原始边框（我找不到删除方法）显示在我的自定义边框上方。附注我希望完全没有边框，我只是展示 

border: 4px;
示例来更好地说明这个问题。

html css border
3个回答
0
投票

使用 

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>

0
投票

使用 

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
投票

有时，即使 border 设置为 0，盒子阴影也会影响这一点。 删除 box shdow 后，我的布局就可以工作了。

/*remove below */
 -webkit-box-shadow: inset 0 1px 2px rgba(10,10,10,.1); 
 box-shadow: inset 0 1px 2px rgba(10,10,10,.1);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.