Как убрать рамку в html

Как убрать рамку с формы?

ЯcReated's blog — пишем об интернет, веб, Google, WordPress и немножко SEO

Сегодня я Вам хочу поведать о том как убрать рамку с формы! Я недавно столкнулся с этим в Joomla, а именно нужно было убрать рамку с формы поиска сайта , сделанного на Joomla. И так убрать рамку можно 2 способами:

при помощи css
прямо в коде

1 способ при помощи css. Вставляем в css следущий код:

Это кусок кода означает что во всех формах рамки не будет, но если Вам нужно убрать рамку только с одной формы, то нужно создать класс «например .youinput » и применять его к тем формам где не нужна рамка.

2 способ прямо в коде формы:

На сегодня всё! Всем спасибо за внимание. А теперь картинка:

Как убрать рамку у кнопок?

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

Сама рамка устанавливается через универсальное свойство border, оно одновременно определяет толщину рамки, её стиль и цвет. Соответственно, чтобы у кнопки убрать рамку есть три способа:

задать нулевую толщину рамки;
указать стиль рамки как none или hidden ;
установить прозрачный цвет рамки.

Толщина рамки

Используем свойство border-width с нулевым значением или универсальное border (пример 1).

Пример 1. Нулевая толщина рамки

Стиль рамки

За стиль рамки отвечает свойство border-style или, опять же, универсальное border . В качестве значения указываем none или hidden (пример 2).

Пример 2. Меняем стиль рамки

Значения none и hidden дают одинаковый результат, но имеют небольшие отличия, которые проявляются только при создании линий в таблицах. Для кнопок эти значения равнозначны.

Прозрачный цвет

В CSS для прозрачного цвета зарезервировано ключевое слово transparent . Так что для рамки пишем свойство border-color или border с этим значением.

Прозрачный цвет рамки удобно задавать в ситуациях, когда рамка меняет свой цвет при наведении на кнопку курсора мыши или при щелчке по кнопке (пример 3).

Пример 3. Цвет рамки

В данном примере сперва задаём параметры рамки, но делаем её прозрачной через transparent . Затем в псевдоклассе :hover устанавливаем желаемый цвет рамки, который будет проявляться при наведении на кнопку.

См. также

border-bottom-color
border-color
border-left-color
border-right-color
border-top-color
Атрибуты
Граница в CSS
Кнопки
Кнопки
Кнопки в Bootstrap 4
Создание кнопок

Как убрать рамку вокруг изображений-ссылок?

Убрать автоматически добавляемую рамку вокруг изображений-ссылок.

Решение

Пример 1. Убираем рамку

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Рисунок без рамки

В данном примере используется контекстный селектор a img , который указывает использовать стиль только для изображений, расположенных внутри тега .

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Как убрать рамку вокруг button, input и некоторых других элементов в Firefox? [дубликат]

Данная проблема может возникнуть и на input’ах. При этом, блоки могут иметь еще и лишний отступ. Поэтому надежнее будет написать так:

// Remove border and padding in Firefox ::-moz-focus-outer, ::-moz-focus-inner

Отслеживать
ответ дан 4 янв 2017 в 8:29
MobiDevices MobiDevices
7,291 5 5 золотых знаков 27 27 серебряных знаков 69 69 бронзовых знаков
А padding зачем?
4 янв 2017 в 8:31
@Yuri я все расписал.
4 янв 2017 в 8:31

css
firefox

Важное на Мете