Как видите, в форме у меня есть три поля ввода со встроенными метками. На самом деле, я задаю поле ввода шириной границы, но проблема в том, что нижняя и правая границы берутся по умолчанию. Я не уверен, в чем проблема. Во-вторых, внутренняя граница появляется, когда я нажимаю на ввод.
Я хочу исправить эти ошибки.
.left-align{
margin-right: 75px;
}
.search-input {
margin-top: 5px;
margin-bottom: 5px;
display:inline-block;
*display: inline; /* for IE7*/ /* for IE7*/
vertical-align:middle;
margin-left:14px;
border-width: 2px !important;
}
.search-label {
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
float: left;
padding-top: 5px;
text-align: right;
width: 80px;
}
<div class = "d-flex my-2 left-align flex-column gap-2 w-100 " >
<div class = "block">
<label class = "fw-bold search-label" >Warehouse</label>
<input class = "search-input" type = "search"/>
</div>
<div class = "block">
<label class = "fw-bold search-label">Location</label>
<input class = "search-input" type = "search"/>
</div>
<div class = "block">
<label class = "fw-bold search-label">Employee</label>
<input class = "search-input" type = "search"/>
</div>
</div>
@nourhomsi Я хочу, чтобы рамка была полностью черной
Делая это, вы можете исправить эти ошибки. 😊
.left-align{
margin-right: 75px;
}
.search-input {
margin-top: 5px;
margin-bottom: 5px;
display:inline-block;
*display: inline; /* for IE7*/ /* for IE7*/
vertical-align:middle;
margin-left:14px;
border-width: 2px !important;
border-color: black; /* added border-color to match with border color */
border-radius: 3px; /* added border-radius to match with border radius on focus */
}
.search-input:focus{
border-radius: 0px !important;
}
.search-label {
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
float: left;
padding-top: 5px;
text-align: right;
width: 80px;
}
<div class = "d-flex my-2 left-align flex-column gap-2 w-100 " >
<div class = "block">
<label class = "fw-bold search-label" >Warehouse</label>
<input class = "search-input" type = "search"/>
</div>
<div class = "block">
<label class = "fw-bold search-label">Location</label>
<input class = "search-input" type = "search"/>
</div>
<div class = "block">
<label class = "fw-bold search-label">Employee</label>
<input class = "search-input" type = "search"/>
</div>
</div>
Что ты пытаешься сделать? Понятно, что код скопирован с какого-то старого сайта. Поэтому, пожалуйста, приведите пример того, чего вам нужно достичь здесь