Блог

Главная - Вопросы по программированию - Граница не видна

Граница не видна

#css #sass #styles

#CSS #нахальство #стили

Вопрос:

Почему граница не видна под полем ввода?

Кроме того, кнопка переходит границу, и граница является непрерывной для кнопки рядом с ней, но не для поля ввода.

изображение результата

Мой CSS

 input, button {  display: block;  position: relative;  width: 300px;  margin: auto;  cursor: pointer;  border: 0;  height: 60px;  outline: 0; } input {  border-radius: 10px 0 0 10px; } button {  width: 100px; } input:after {  border-radius: 10px 0 0 10px; } input:after, button:after {  transition: 200ms all ease;  background-color: #fcfcfc;  border: 1px solid #afafaf;  line-height: 60px;  color: #252525;  font-size: 1.5em;  text-align: center;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  display: inline-block;  content: "Select package.json"; } button:after {  content: "Upload";  border-radius: 0px 10px 10px 0; } input:hover:after, button:hover:after {  background-color: #f1f1f1; }

Комментарии:

1. Можете ли вы добавить html, а также проверить данный scss, так как я не получаю тот же вывод, что и ваш. Вы указали тег как sass, но он должен быть scss.

2. Обратите внимание, что к входным элементам не могут быть прикреплены псевдоэлементы.

Ответ №1:

Я внес некоторые незначительные коррективы .input, button и добавил некоторые атрибуты границ input .

 input,  button {  display: inline-flex;  position: relative;  width: 300px;  margin: auto;  cursor: pointer;  height: 60px;  outline: 0;  line-height: 60px;  font-size: 1.5em;  border: 0;  padding: 0;  }  input {  border-radius: 10px 0 0 10px;  border-top: 1px solid #afafaf;  border-right: 0;  border-bottom: 1px solid #afafaf;  border-left: 1px solid #afafaf;  padding: 0 0 0 12px;    }  button {  width: 100px;  }  input:after {  border-radius: 10px 0 0 10px;  }  input:after,  button:after {  transition: 200ms all ease;  background-color: #fcfcfc;  border: 1px solid #afafaf;  color: #252525;  text-align: center;  width: 100%;  height: 100%;  display: inline-block;  content: 'Select package.json';  }  button:after {  content: 'Upload';  border-radius: 0px 10px 10px 0;  }  input:hover:after,  button:hover:after {  background-color: #f1f1f1;  } 
 lt;input/gt;lt;buttongt;lt;/buttongt;

Комментарии:

1. Пожалуйста, добавьте объяснение того, что вы сделали, а не просто код.

2. В этом случае почти ничего не изменилось

Метки: