Bootstrap Цвет границы ввода и проблема с внутренней границей

Как видите, в форме у меня есть три поля ввода со встроенными метками. На самом деле, я задаю поле ввода шириной границы, но проблема в том, что нижняя и правая границы берутся по умолчанию. Я не уверен, в чем проблема. Во-вторых, внутренняя граница появляется, когда я нажимаю на ввод.

Я хочу исправить эти ошибки.

       .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 31.10.2022 09:40

@nourhomsi Я хочу, чтобы рамка была полностью черной

David-JSON 31.10.2022 11:10
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
83
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
  1. По умолчанию граница принимает цвет границы по умолчанию, поэтому мы должны упомянуть цвет границы.
  2. При фокусе в поле ввода он принимает радиус границы по умолчанию равным 10px, поэтому его также необходимо объявить (радиус границы) как ваше желание соответствовать радиусу границы.

Делая это, вы можете исправить эти ошибки. 😊

.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>

Другие вопросы по теме