Как убрать стили у input

Обнуление стилей

Не оставляйте браузеру возможности отображать элементы интерфейса так, как этого «хочется» ему — описывайте стили сами!

Браузер задает HTML элементам оформление по-умолчанию

Начинающие верстальщики бывают двух видов:
— одни знаю о понятии reset.css и используют его бездумно,
— другие не знают о нем и много мучаются, пытаясь переопределить браузер по мере поступления проблем со стилями.

Действительно, проблему можно долго игнорировать. Но только до тех пор, пока не становится важно сделать «pixel perfect», т.е. чтобы дизайн и верстка были практически идентичны по взаимному расположению элементов.

Обнуление

) в одних браузерах могут быть реализованы с использованием margin , а в других — с помощью padding . Также частенько доставляют неудобства различные отступы параграфов (

), различие наличия/отсутствия границ у некоторых элементов, ну и, конечно же, совершенно разные стили заголовков (-).

Самый простой способ быстро избавиться от проблем с отступами:

Однако эта деректива обнуляет отступы сразу всех(!) элементов. Не говоря уже об анти-паттерне «звездочка».
Лучше использовать точечный подход к элементам:

html, body, h1, h2, h3, h4, h5, h6, div, span, p, pre, hr, em, strong, b, i, a, acronym, applet, address, dfn, tt, var, kbd, samp, ruby, blockquote, q, cite, ins, del, s, strike, u, sub, sup, big, small, abbr, center, table, tr, th, td, caption, thead, tbody, tfoot, form, input, label, textarea, button, fieldset, legend, select, canvas, article, section, footer, header, main, hgroup, nav, aside, audio, video, details, summary, menu, output, figure, figcaption, time, mark, ul, ol, li, dl, dt, dd, code, img, iframe, object, embed

Как видите, мы перечисляем все необходимые элементы. Таким образом мы всегда можем отменить обнуление для конкретного элемента.

Следующим ходом будет точечная отмена границ:

img, fieldset

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

Нормализация

Следующая проблема — различие размеров шрифтов.

Вечный спор между px, em и rem оставим в стороне. В большинстве случаев я использую «px». Итак, задаем базовой правило вроде такого:

body < font: 16px/1.4 Arial, Verdana, Tahoma, sans-serif; >

Обратите внимание, что значение line-height указано безразмерным. Это не ошибка, таким образом это значение (в нашем случае — 1.4, т.е. 140% от текущего размера шрифта) будет динамически высчитываться в зависимости от заданного размера шрифта в любом блоке. Если бы мы указали единицы измерения, то привязали бы line-height строго к нашим 16px.

Также можно сразу задать базовые размеры для H1-H6 (хотя обычно используются только H1-H3):

h1 < font-size: 20px; >h2 < font-size: 15px; >h3

,
,
), т.к. это сильно затруднит использовании обычных списков на страницах.
Представьте, человек наполняет страницу через «визивик», делает маркированный список, а он на странице он отображается без маркеров. Неприятно.
Лучше прописать нормальный вид спискам по-умолчанию и отменять маркеры и отступы в тех структурах, где вам это необходимо. Итого:

IMG. Важно не забыть ограничить картинку пределами контейнера:

Этого достаточно, чтобы маркеры (нумерованные и ненумерованные) отображались примерно одинаково во всех браузерах.

Можно добавить кое-что и для форм:

input, label, select < vertical-align: middle; >textarea < vertical-align: top; >button < cursor: pointer; -webkit-appearance: button; >button[disabled], input[disabled]

Итого

Мой вариант reset+notmalize:

html, body, h1, h2, h3, h4, h5, h6, div, span, p, pre, hr, em, strong, b, i, a, acronym, applet, address, dfn, tt, var, kbd, samp, ruby, blockquote, q, cite, ins, del, s, strike, u, sub, sup, big, small, abbr, center, table, tr, th, td, caption, thead, tbody, tfoot, form, input, label, textarea, button, fieldset, legend, select, canvas, article, section, footer, header, main, hgroup, nav, aside, audio, video, details, summary, menu, output, figure, figcaption, time, mark, embed, ul, ol, li, dl, dt, dd, code, img, iframe, object < margin: 0; padding: 0; >article, section, aside, footer, header, hgroup, main, nav, menu, details, summary, figure, figcaption < display: block; >html < -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; >html, body < height: 100%; >body < font: 16px/1.4 Arial, sans-serif; color: #000; background: #fff; >a < color: #0081FF; text-decoration: underline; cursor: pointer; >a:hover < text-decoration: none; >h1 < font-size: 26px; >h2 < font-size: 15px; >h3 < font-size: 13px; >h4 < font-size: 12px; >h1, h2, h3, h4 < line-height: 1.2; >li < margin-left: 25px; >b, strong < font-weight: bold; >img < border: 0; max-width: 100%; >hr < box-sizing: content-box; height: 0; >table < border-collapse: collapse; border-spacing: 0; >th, td < text-align: left; padding: 0; >sub, sup < position: relative; vertical-align: baseline; font-size: 0.75em; line-height: 1; >sup < top: -0.5em; >sub < bottom: -0.25em; >pre < overflow: auto; >code, kbd, pre, samp < font-family: monospace; font-size: 1em; >fieldset < border: 0; >input < vertical-align: middle; >input[type="text"], input[type="email"], input[type="tel"], textarea < -webkit-appearance: none; >input[type="button"], input[type="submit"], input[type="reset"], button < cursor: pointer; overflow: visible; -webkit-appearance: button; >button[disabled], input[disabled] < cursor: default; >input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"] < padding: 2px 6px; border: 1px solid #787878; background: #fff; font: inherit; color: inherit; >textarea < vertical-align: top; padding: 3px 6px; overflow: auto; border: 1px solid #787878; background: #fff; font: inherit; color: inherit; >select < vertical-align: middle; border: 1px solid #787878; background: #fff; font: inherit; color: inherit; >input::-webkit-input-placeholder < color: #ccc !important; >input::-moz-placeholder < color: #ccc !important; >input:-ms-input-placeholder

Если что-то лишнее (например, у вас не будет форм), выкидываете и используете остальное, поправив «нормализацию» под себя.

Существуют еще и другие дефолтные значения, которые лично я считаю либо излишними, либо достаточно спорными.. Наиболее известным является Reset.css Эрика Мейера.

Как убрать стандартные стили (обводка на инпуте)?

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

Как можно пофиксить?

Проект создал через vue create *имя* , пресет как и раньше выбрал стандартный.

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

2 комментария

Простой 2 комментария

Как убрать стили у input

Здесь могла бы быть ваша реклама

Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006
Откуда: Israel

Помог: 3 раз(а)

Секрет
Теперь, когда вы уже наверняка второпях отправили свой запрос,
я расскажу вам простой секрет, который сэкономит вам уйму ожиданий,
даже если первый ответ по теме последуем сразу же.

Само собой я знаю что ответят мне тут же, и если я посмотрю
на сообщения на форуме, то пойму что в общем то я и не ошибаюсь.
Но еще я точно замечу, что очень мало тем, в которых всего два ответа :
вопрос автора и еще два сообщение вида Ответ + Спасибо

После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..

Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос — где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.

Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.

На последок как оно происходит на форумах

Цитата:

Новичок: Подскажите пожалуста самый крепкий сорт дерева! Весь инет перерыл, поиском пользовался!
Старожил: Объясни, зачем тебе понадобилось дерево? Сейчас оно в строительстве практически не используется.
Новичок: Я небоскрёб собираюсь строить. Хочу узнать, из какого дерева делать перекрытия между этажами!
Старожил: Какое дерево? Ты вообще соображаешь, что говоришь?
Новичок: Чем мне нравиться этот форум — из двух ответов ниодного конкретного. Одни вопросы неподелу!
Старожил: Не нравится — тебя здесь никто не держит. Но если ты не соображаешь, что из дерева небоскрёбы не строят, то лучше бы тебе сначала школу закончить.
Новичок: Не знаите — лучше молчите! У меня дедушка в деревянном доме живёт! У НЕГО НИЧЕГО НЕ ЛОМАЕТСЯ.
Но у него дом из сосны, а я понимаю, что для небоскрёба нужно дерево прочнее! Поэтому и спрашиваю. А от вас нормального ответа недождёшся.
Прохожий: Самое крепкое дерево — дуб. Вот тебе технология вымачивания дуба в солёной воде, она придаёт дубу особую прочность:
Новичок: Спасибо, братан! То что нужно.

Отредактировано модератором: Uchkuma, 26 Апреля, 2011 — 10:21:12

Как убрать свечение вокруг текстового поля?

В браузерах Safari и Chrome, Mozilla вокруг текстового поля при получении фокуса наблюдается характерное свечение, которое указывает активное поле. Если по дизайну свечение не требуется, его можно убрать, добавив свойство outline со значением none к селектору input:focus. Псевдокласс :focus говорит о том, что стиль применяется к элементу получившим фокус.

      input[type="text"]:focus  

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

Выделение активных элементов форм в Safari и Chrome, Mozilla применяется не только к текстовым полям, но и к другим элементам. Чтобы убрать свечение только для определенных элементов, в данном примере используется конструкция input[type=»text»], которая говорит: «использовать стиль для тегов input только с атрибутом type равным text».