Как задать в css label сверху рамки
Перейти к содержимому

Как задать в css label сверху рамки

  • автор:

CSS цвет рамки кнопки

Вы пишете про рамку ( border ), а стили устанавливаете для внешней границы ( outline ). Для outline можно задать цвет, но для всей границы, а не для отдельных сторон и чтобы цвет работал, нужно добавить еще толщину и стиль. Если всё-таки надо менять цвет рамки, то border-left-color: red; border-top-color: red;

16 окт 2023 в 22:44

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

outline — это свойство, которое задаёт контур элемента. Контур не делится на верхний, нижний, левый и правый. Это единая линия, к которой может быть применен стиль (контур будет в виде штриха, пунктира, сплошной линии, двойной линии и т.д.), цвет, ширина. И какими бы не были стиль, цвет, ширина контура, сделать его только сверху и слева, сверху и справа, снизу и сверху, справа и слева, снизу и слева, снизу и справа, справа, слева сделать не представляется возможным. Если Вы работаете с outline — Вы получите вот такой эффект. Контур (единую линию) вокруг элемента.

body < background-color: #1c1c1b; >.button < background-color: transparent; border-radius: 6px; border: 1px solid #1c1c1b; color: beige; margin-bottom: -200px; margin-left: 200px; width: 50px; height: 50px; >button:focus, button:active

Если же Вы хотите, чтобы при focus и active у Вас была видна только верхняя и левая ГРАНИЦЫ (ГРАНИЦЫ, НЕ КОНТУР)то это делается следующим образом:

body < background-color: #1c1c1b; >.button < background-color: transparent; border-radius: 6px; border: 1px solid #1c1c1b; color: beige; margin-bottom: -200px; margin-left: 200px; width: 50px; height: 50px; >button:focus, button:active

Отслеживать
ответ дан 17 окт 2023 в 12:09
darinka poznyak darinka poznyak
1,014 1 1 золотой знак 2 2 серебряных знака 12 12 бронзовых знаков

Вот рабочий вариант кода для решения Вашего вопроса.

ВСЕГДА когда прописываете свойства border или outline Вы должны указать для них толщину, форму и цвет, а если не указать, то браузер просто не понимает что ему нужно отобразить.

Представьте: Вы задали цвет пикселю, но не выделили ни одного пикселя для отображения, цвет то существует, а вот того, что он должен окрашивать нет, поэтому в Вашем случае и не работало.

Если остались еще вопросы буду рад помочь.

PS: Если ответ помог, пожалуйста, не забудьте пометить его как правильный.

   .img < margin-left: 10px; margin-top: 10px; >body < background-color: #1c1c1b; >h1 < margin-top: -165px; margin-left: 300px; font-size:450%; font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; color: beige; >p1 < font-size: 250%; font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; color: beige; margin-top: 0px; margin-block: 0px; line-height: 200px; >.textfield < width:175px; background-color: #2b2b2b; color: beige; box-shadow: 3px 2px 1px 0.5px rgb(51, 51, 51); border-radius:6px; border-color: transparent; margin-top:-100px >.button < background-image: "button.png"; background-color: transparent; border-radius: 6px; border-bottom: #1c1c1b; border-right: #1c1c1b; border-left-color:1px solid #1c1c1b; border-top-color: 1px solid #1c1c1b; color: beige; margin-bottom: -200px; margin-left: 200px; width:50px; height: 50px; >.button:focus, .button:active   Weather   Картинка погоды

Weather app

Enter the location below and confirm by clicking the button

Элемент label

Элемент связывает текст с определённым элементом формы. Обычно применяется в следующих случаях.

  • Текст становится активным и при щелчке по нему изменяется значение связанного с текстом переключателя или флажка. Это удобно для пользователя, потому что не приходится целиться курсором в небольшой по размерам элемент.
  • Стили для позволяют задать положение текста и другие характеристики оформления.

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

Пример 1. Использование

Визуально себя никак не проявляет, поэтому понять, задействован он или нет, можно только по тексту. Если щелчок по тексту переносит фокус в текстовое поле, ставит галочку в переключателе или ещё как-то активирует близлежащий элемент формы, значит работает .

Поля формы и текст для них могут визуально находиться рядом, но в коде документа располагаться внутри разных элементов. Чтобы связать их между собой применяется атрибут for , его значением выступает идентификатор у , как показано в примере 2.

Пример 2. Атрибут for

Формы

# Работа со временем

Для каждого элемента задаём свой уникальный идентификатор через атрибут id , а внутри элемента указываем этот же идентификатор как значение атрибута for .

Также применяется как один из элементов для вёрстки сложных форм. В примере 3 показана форма авторизации, в которой текст располагается рядом с полями для ввода логина и пароля.

Пример 3. Форма для авторизации

Результат данного примера показан на рис. 1.

Форма для авторизации пользователя

Рис. 1. Форма для авторизации пользователя

См. также

  • Аккордеон меню
  • Вкладки на CSS
  • Выпадающее меню
  • Использование :checked
  • Подсказка в поле формы
  • Пользовательские формы
  • Стилизация переключателей
  • Стилизация флажков
  • Формы в Bootstrap 4
  • Формы в HTML

Как сделать label над input css

enter image description here

Для формированию подписи к текстовому полю ввода input обычно используется тэг label. Рассмотрим вариант в котором подпись поля смещена на границу. Пример на фото:

Исходный HTML файл:

 class="input-box"> label name  type="text">  
.input-box  /* родительский блок относительно которого будем формировать положение тега label */ position: relative; > input  background: #fff; padding: 10px; /* закруглим края у поля ввода */ border-radius: 11px; width: 200px; > label  position: absolute; /* смещение относительно родительского элемента 10px вверх от верхнего края и 10px влево */ top: -10px; left: 10px; background: #fff; padding: 0 5px; > 

Как вставить в border текст при клике на css?

Здравствуйте уважаемые верстальщики. Подскажите пожалуйста, как можно сделать подобный трюк? Суть в том, что при клике по текстовому input пропадает placeholder и появляется внутри рамки.5b9919ed6e9be638892390.jpeg 5b9919b585cfe995117922.jpeg

  • Вопрос задан более трёх лет назад
  • 505 просмотров

Комментировать
Решения вопроса 1

Rema1ns

и так сойдет

это не плейсхолдер, а label, просто он абсолютный, при фокусе на инпут дописаны стили, что он перемещается вверх.

По верстке, сначала input затем label.
По css input + label, input:focus + label

Селектор примерно такой

select:required:valid ~ label, select:optional ~ label, input[type="email"]:required:focus ~ label, input[type="email"]:optional:focus ~ label, input[type="email"]:required:valid ~ label, input[type="text"]:required:focus ~ label, input[type="text"]:optional:focus ~ label, input[type="text"]:required:valid ~ label, input[type="text"]:optional ~ label

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *