Как убрать стили у кнопки css

Убрать всё с input

Я не лентяй. А как при. вводе текста сделать стили. Ну на пример когда я кликаю это :active, а когда текст ввожу это?

21 мая 2013 в 18:46

Разве что :focus — элементы, на которых фокус. Про псевдо-классы тут — w3schools.com/css/css_pseudo_classes.asp

21 мая 2013 в 19:10
@Vlmake ну я надеюсь, что ты хоть перед собой честен
23 мая 2013 в 2:29

outline: 0; уберет все стили с инпута

Отслеживать
ответ дан 17 ноя 2022 в 12:55
Viktoriya Morozova Viktoriya Morozova

appearance: none; 

Отслеживать
75.2k 120 120 золотых знаков 38 38 серебряных знаков 57 57 бронзовых знаков
ответ дан 5 мая 2023 в 15:22
Брайт Грин Брайт Грин

1. переведите, пожалуйста, текст ответа (нажав править ниже текста ответа) на русский язык. 2. пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править

Современный сброс стилей CSS

В этой статье вы узнаете о том, как сбрасывать CSS в наши дни.

��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️

Если честно, то кажется я слишком много и через чур увлеченно забиваю голову всякой нудной чепухой из CSS. Одним из таких моментов является сброс CSS, это возможно тот момент, который забрал у меня слишком много времени за последние годы.

В эпоху современной веб разработки, нам не так то и нужен загруженный сброс стилей или вообще совсем не нужен, поскольку проблемы совместимости CSS в браузерах сейчас встречаются куда реже, чем это было в дни старого доброго IE6. Это был момент времени, когда появились такие реализации сброса стилей в CSS, как normalize.css и спасли нас от ада с бесконечной вознёй при правке стилей. Но эти дни уже прошли и сейчас мы вполне можем доверять браузерам в этом плане, так что подобные подходы к сбросу стилей, в большинстве своём, уже довольно излишне.

Сброс разумных настроек по умолчанию

Мне до сих пор нравится делать сброс, так что я долго и усердно, годами ковырялся, как одержимый в Code golf (прим. это когда побеждает самый короткий и действенный подход в программировании ) стиле на этом направлении. Я всё объясню, что в этом коде где и как, но сначала посмотрите на него целиком:

/* Указываем box sizing */
*,
*::before,
*::after box-sizing: border-box;
>

/* Убираем внутренние отступы */
ul[class],
ol[class] padding: 0;
>

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd margin: 0;
>

/* Выставляем основные настройки по-умолчанию для body */
body min-height: 100vh; 
scroll-behavior: smooth; 
text-rendering: optimizeSpeed; 
line-height: 1.5;
>

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] list-style: none;
>

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) text-decoration-skip-ink: auto;
>

/* Упрощаем работу с изображениями */
img max-width: 100%; 
display: block;
>

/* Указываем понятную периодичность в потоке данных у article*/
article > * + * margin-top: 1em;
>

/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select font: inherit;
>

/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) * animation-duration: 0.01ms !important; 
animation-iteration-count: 1 !important; 
transition-duration: 0.01ms !important; 
scroll-behavior: auto !important; 
>
>

Ну, а теперь разбираемся

Начинаем мы с box-sizing . Тут я простым и элегантным движением сразу же сбрасываю все элементы и псевдоэлементы на box-sizing: border-box .

*,
*::before,
*::after box-sizing: border-box;
>

Кто-то считает, что псевдоэлементы должны наследовать параметры блочной модели, но я считаю это глупым. Если вы хотите использовать другое значение для box-sizing , то просто укажите его — ну это то, как я делаю, в любом случае. Я написал про box-sizing больше в CSS From Scratch.

/* Убираем внутренние отступы */
ul[class],
ol[class] padding: 0;
>

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd margin: 0;
>

После box-sizing , я сбрасываю margin и padding , даже там, где они выставлены дефолтными настройками браузеров. Тут и так всё понятно, так что я не буду уделять этому моменту много внимания.

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

body min-height: 100vh; 
scroll-behavior: smooth; 
text-rendering: optimizeSpeed; 
line-height: 1.5;
>

Идем дальше: стили для body . Тут у меня всё просто. Очень полезно указать для body занять весь viewport , даже когда он пуст, делаю я это, выставляя min-height на 100vh . Ещё мне нравится плавный скролл к анкорам, так что тут я выставлю scroll-behavior: smooth .

Ещё, я выставил только два текстовых стиля. line-height на 1.5 , потому что по-дефолту стоит 1.2 , чего откровенно недостаточно в плане доступности и читабельности текста. Так же я выставил text-rendering на optimizeSpeed . Используя optimizeLegibility вы делаете ваш текст приятнее на вид, но можете столкнуться с серьёзными проблемами производительности, такими как задержки в 30 секунд при загрузке, так что я его стараюсь избегать. Хотя, я иногда добавляю его для секций с микротекстом.

ul[class],
ol[class] list-style: none;
>

Как и с отступами, я сбрасываю стилизацию списков только у элементов, у которых указан class .

a:not([class]) text-decoration-skip-ink: auto;
>

Для ссылок без указания класса, я выставлю text-decoration-skip-ink: auto , так что подчеркивание будет рендериться куда читабельнее. Вообще, это можно было бы выставить всем ссылкам, но у меня возникло несколько конфликтов, так что я оставил так, как написано выше.

img max-width: 100%; 
display: block;
>

Дальше идут старые добрые резиновые изображения. Я решил сделать все изображения блочными элементами, потому что, откровенно говоря, жизнь слишком коротка, чтобы мириться с этим мелким, стрёмным отступом снизу и вообще, в реальности, изображения — особенно те, с которыми я работаю — обычно подразумевают под собой блочное поведение.

article > * + * margin-top: 1em;
>

Мне очень нравится этот трюк в CSS и я наконец-то осмелился добавить его в сброс. Так называемый “lobotomized owl selector” выбирает прямых потомков article и добавляет им сверху внешний отступ в 1em . Это указывает понятную периодичность в потоке контента у article . Вообще, на самом деле, я использую удобную штуку с .flow , сейчас уже почти в каждом проекте. Вы можете больше прочитать про это на 24 Ways. Да и вообще, мне так кажется, что это сейчас мой самый используемый CSS.

input,
button,
textarea,
select font: inherit;
>

Ещё одна вещь, которую я наконец то решился выставить по дефолту это font: inherit для инпутов, которые, проще говоря, делают то, что и должны делать. Хватит уже этого мелкого (mono, в некоторых случаях) текста!

@media (prefers-reduced-motion: reduce) * animation-duration: 0.01ms !important; 
animation-iteration-count: 1 !important; 
transition-duration: 0.01ms !important; 
scroll-behavior: auto !important; 
>
>

Последнее, но уж точно не менее важное, это один @media запрос, который сбрасывает анимации, переходы и поведенческие настройки для скролла, но только в тех случаях, когда пользователь предпочитает как можно меньше всяких движений на странице. Мне нравится такая штука в сбросе стилей, с побеждающим специфичность селекторов !important , потому что в современных реалиях, если пользователь не хочет видеть лишних переходов и т.п., то он и не должен их видеть, вне зависимости от CSS при сбросе стилей.

Заключение

Вот и всё, вот он маленький и сброс для стилей, который делает жизнь куда проще. Если он вам приходится по вкусу, то смело можете его брать на вооружение! Берите его на GitHub или в NPM.

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

Сделал кнопку с изображением , но появилась белая обводка. Как её убрать?

body

Отслеживать

13.1k 2 2 золотых знака 21 21 серебряный знак 38 38 бронзовых знаков

задан 17 фев 2018 в 20:22

1 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака

Убрать у кнопки внутренние отступы и рамку padding: 0; border: 0;

17 фев 2018 в 20:33

стандартный ресетер для кнопок выглядит как-то так < margin: 0; padding: 0; border: 0; outline: none; background-color: transparent; >дальше уже сами решайте что из этого является причиной ваших проблем.

Сброс стилей с помощью CSS Reset

Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей.

Например, вы используете элемент a в вашем документе. Большинство браузеров, как Internet Explorer и Firefox, добавляют ссылке синий цвет и подчёркивание. Однако представьте, что через пять лет кто-то решил создать новый браузер (назовём его UltraBrowser). Разработчикам браузера не нравился синий цвет и раздражало подчёркивание, поэтому они решили выделять ссылки красным цветом и полужирным шрифтом. Именно исходя из этого, если вы установите базовое значение стилей для элемента a, то он гарантированно будет таким, каким вы хотите его видеть, а не как предпочитают его отображать разработчики UltraBrowser.

Простой пример

Пример 1: отображение элемента p по умолчанию.

В первом примере я поместил 3 параграфа (p) без установленных стилей внутрь элемента div, которому я выставил синий фон и оранжевую границу.

По умолчанию, вы увидите, что в Firefox между верхней границей контейнера div и верхней границей первого параграфа существует промежуток. Аналогичная ситуация и с нижней границей контейнера. Однако, в Internet Explorer мы уже не видим тех промежутков, которые наблюдали в Firefox.

Так какой браузер всё же прав? На самом деле, это не имеет значения. Что действительно важно, так это совершенно различное отображение отступов в разных браузерах, если мы не используем собственные стили для их задания.

Данный пример, конечно, упрощён. На практике CSS Reset используется для сброса тех правил, которые могут поставить под вопрос кроссбраузерность ваших стилей.

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

Как всё начиналось?

CSS Reset впервые был применён в далёком 2004 году (ещё динозавры по сети бродили) Эндрю Креспанисом (Andrew Krespanis). В своей статье он советовал использовать универсальный селектор (*) в начале CSS-файла, чтобы задать всем элементам нулевые отступы (margin и padding).

Универсальный селектор работает как регулярное выражение, захватывая каждый элемент на своём пути, без разбора и пощады. Так как до него мы не указали никаких других селекторов, со всех элементов в документе (это лишь в теории, в действительности происходит несколько иначе) удаляются какие-либо отступы. Этим мы решаем проблему первого примера и указываем браузеру на то, кто здесь хозяин. Можно взглянуть на результат во втором примере.

Но теперь у нас вообще нет никаких отступов, в том числе между отдельными параграфами! Что делать? Не врать и не бояться: ниже нашего сброса мы опишем нужное нам правило. Сделать это можно разными способами: указать отступ снизу или сверху параграфа, указать его в процентах, пикселях или в em.

Самое главное, браузер теперь играет по нашим правилам, а не мы по его. Я решил сделать подобным образом:

В итоге у нас получилось то, что можно увидеть в третьем примере.

Вскоре после этого, CSS-гуру Эрик Мейер (Eric Meyer) производит дальнейшие исследования вышеописанного приёма сброса отступов. В них он затрагивает работу Тантека Челика и его набор CSS-правил undohtml.css, в котором не только сбрасывались отступы, но и устанавливались базовые значения других атрибутов: стили шрифтов, стили списков.

После многочисленных переделок и уточнений, мы приходим к замечательному решению под названием CSS Reset. В нём сброс значений сделан аккуратнее: с применением непосредственно имён элементов, а не универсального селектора. Он же устанавливает значения по умолчанию для «проблемных» элементов, например таблиц, в которых border-collapse обрабатывается некорректно некоторыми браузерами.

Разумеется, существуют и другие подобные решения (YUI Reset CSS от Yahoo!). Вы можете создать собственное, которое будет удовлетворять нуждам именно вашей вёрстки.

Применение CSS Reset

Давайте остановимся на некоторых моментах использования приёма в реальном мире.

1. Определите, как именно вы будете сбрасывать стили

Выше я указал два способа сброса стилей: простой, основанный на применении универсального селектора (который я не рекомендую использовать) и комплексный, с применением стилей от Эрика.

Помимо этого, вы можете использовать разработку от Yahoo! (YUI CSS Reset), которую вы можете забирать прямо с их сервера.

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

1. A Killer Collection of Global CSS Reset Styles;
2. Less is more — my choice of Reset CSS (Эд Эллиот).

2. Ваш CSS Reset — это первое, что должен увидеть браузер

Сброс стилей после установки ваших собственных стилей для элементов — это неверный подход. В этом случае ничего хорошего от отображения браузером ждать не следует. Запомните, что сначала всегда следует подключать CSS Reset, а потом все остальные стили.

Да, я понимаю, это прозвучало смешно, но это одна из основных ошибок разработчиков от мала до велика. Многие просто об этом забывают.

Некоторые могут задать логичный вопрос: почему так происходит? Ответ прост: правила, записанные ниже по тексту CSS-файла (и даже ниже по их порядку подключения в документе), перезаписывают правила, объявленные ранее.

Давайте не будем сильно отходить от темы и продолжим. Применим стили Эрика Мейера к нашему примеру, но после описания наших свойств, как показано в 4 примере. Математики бы сказали следующее: «Что и требовалось доказать».

3. Используйте отдельный CSS-документ для CSS Reset

Я должен (нет, меня отнюдь не вынудили) упомянуть этот совет. Использование отдельного файла для CSS Reset — это обычная практика, которую поддерживает большое число разработчиков.

На самом деле я придерживаюсь позиции создания одного большого CSS-файла из-за большей производительности подобного подхода. Но в данном вопросе я склонен согласиться с большинством: CSS Reset следует вынести в отдельный файл (обычно его называют reset.css). В таком случае вы можете использовать его в различных проектах, не прилагая при этом никаких усилий по его отделению от других правил CSS.

4. Старайтесь избегать использование универсального селектора

Несмотря на то, что эта концепция работает, её применение чаще всего не является желательным из-за несовместимости с некоторыми браузерами (например, данный селектор некорретно обрабатывается в Internet Explorer). Вам следует использовать этот приём только для простых, небольших, статичных и предсказуемых страниц (если уж вам пришлось делать это).

Данный совет особенно важен тогда, когда вы разрабатываете такие решения, как темы для CMS. Вы не можете заранее предсказать, как она будет использована и как её будут модифицировать. Лучше описать фундаментальные CSS-правила для всех элементов, чем использовать для этого непредсказуемый (пусть и меньший по объёму) механизм универсальных селекторов.

5. Избегайте избыточных описаний свойств при использовании CSS Reset

Ещё одна причина, по которой мне не нравится отдельный файл для CSS Reset — это потенциальная избыточность последующих деклараций CSS-свойств. Повторение отдельных ваших стилей среди всего набора CSS-файлов — это моветон и его следует избегать. Разумеется, иногда мы слишком ленивы, чтобы кропотливо пройтись по набору стилей и совместить некоторые из них, но следует хотя бы попытаться!

Вернёмся к CSS Reset от Эрика. Он устанавливает значения по умолчанию для line-height, color и background элемента body следующим образом:

body

1. background-color: #cccccc;
2. color: #996633;
3. Вы хотите по горизонтали повторять определённую фоновую картинку.

В этом случае нет необходимости создавать новый селектор для описания ваших свойств — вы можете их просто включить в CSS Reset. Сделаем это:

body

Не бойтесь модифицировать сам CSS Reset. Подстройте его под себя, заставьте его работать на себя. Изменяйте, перестраиваейте, убирайте и добавляйте так, как это нужно в вашем конкретном случае.

Эрик Мейер по этому поводу сказал следующее: «это не тот случай, когда всем следует использовать CSS Reset без изменений».

Дополнительные материалы

[WSG] Zeroing default padding/margin

Возможно, первое упоминание сброса отступов с помощью универсального селектора в рассылке WSG.

Universal Selector

Эрик Мейерс изучает механизм работы универсального селектора.

No CSS Reset

Джонатан Снук (Johnathan Snook) приводит альтернативную точку зрения на CSS Reset и объясняет, почему избегает их. Мнение одного из уважаемых Web-разработчиков.

Tripoli — a CSS standard for HTML rendering

Tripoli — это другой популярный CSS Reset, который подразделён на несколько версий. Вы можете выбрать подходящую вам.