Размер шрифта кнопки отправки формы HTML не может быть изменен

но это сбрасывает много других стилей. Я хотел бы сохранить стиль по умолчанию, просто с другим размером шрифта.

Размещенный код делает размер шрифта 30 пикселей. Это абсурдно, но работает как определено. Вам необходимо указать, в чем заключается проблема, как вы пытались ее решить, и как ваш подход терпит неудачу.

7 ответов

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

Webkit будет уважать ваши стили элементов пользовательской формы, если вы установите свойство border или box-shadow (да, странно). Как говорили другие, начинайте, по крайней мере, с -webkit-appearance: none; (я бы добавил -moz-appearance: none; appearance: none; ), а затем ссылаюсь на этот ответ на «HTML select font-size»

На chrome положить встроенный размер шрифта или в ссылку css ничего не сделал. Добавлен webkit-внешний вид и, бинго, изменен размер кнопки отправки.

Используя CSS, я обнаружил, что использование более конкретного селектора решило проблему. Вместо использования селектора класса или типа:

Я использовал селектор идентификаторов:

Я сделал это и работает для меня:

Чтобы изменить размер шрифта кнопки отправки, просто используйте этот код css:

@Wesley Уэсли, вы можете показать нам изображение кнопки при использовании CSS, который я разместил в своем ответе.

Я также вижу ту же ошибку на Mac — он не учитывает шрифт. Но по какой-то причине, если я также изменю цвет шрифта и цвет фона в моем стиле, тогда он начинает учитывать шрифт.

Добавьте класс в кнопку отправки HTML и в этом классе в css переопределите стандартный размер шрифта.

Вы также можете сделать что-то с CSS2/3 как:

Я бы также рекомендовал использовать em как размер шрифта, а не px , поскольку пиксели будут отображаться по-разному на разных устройствах и при разных разрешениях. Например, с сетчаткой.

Примечание:

em — относительный масштаб, основанный на размере шрифта, установленном в теле, поэтому, если ваш body < font-size:16px; >затем более поздний определенный размер шрифта суб-правила 1.5em в, например, тип ввода будет 1,5 x 16 пикселей, и т.д.

А ты принудительно обновил страницу с помощью shift-F5? Или добавьте класс к кнопке отправки, как это предлагается, и используйте этот класс в качестве дескриптора.

Вы не скопировали код в моем ответе, прочитайте то, что написали, и сравните его с тем, что я написал в своем ответе.

хорошо, вы сказали, что пытались добавить класс, что я и сделал — когда я нажимаю на ваш jsfiddle, он такой же, как у меня, кстати, нормальный размер по умолчанию .. в Chrome и Safari. не уверены, какой браузер вы проверяете?

ваша реализация класса была неправильной. Узнайте, как устанавливать и использовать классы в Css, но у вас есть класс .submit < font-size:0.5em; >и вызвать этот класс с помощью . Хотя моя версия вашей скрипки работала для меня, попробуйте эту новую скрипку: jsfiddle.net/zxskp5nz/1

моя реализация классов верна (вы можете проверить это, добавив правило color: red), в любом случае ваш новый тоже не работает. Кажется , это не представляется возможным. Благодарю.

извините, но скрипки работают так, как задумано на моих Google Chrome, Firefox, Opera и Safari. Вам нужно внести изменения: вам нужно установить 20em на другое значение, скажем, 0.5em, и это покажет разницу в размере, вы также должны знать, что em относятся к размеру основного шрифта, так как ваш размер шрифта в вашем тело установлено в 30px, шрифт 20em — 20×30! Отрегулируйте размер шрифта в пикселях вашего тела и соответственно введите ems.

Я попробовал ваш пример — ваш последний в комментариях, он не работает в Safari или Chrome на Mac. Это работает в Firefox ..

Извините, скрипки не работают для вас. Они выглядят хорошо для меня во всех браузерах. Я думаю, возможно, есть что-то конкретное в вашей настройке, которое мешает или мешает коду страницы? На самом деле я не могу предложить намного больше, но в трех отдельных ответах здесь указывается метод, который следует использовать, поэтому, если он не работает, проблема, вероятно, более специфична для вашей установки. : — /

Привет @CpnCrunch, ну, скрипки все еще работают на моем Firefox и моем Chrome, на Windows 7, прямо сейчас. Я не могу комментировать Mac.

Да, я думаю, что проблема возникает только на Mac IIRC. Вероятно, будет справедливо сказать, что это ошибка в OSX Chrome.

Я также вижу ту же ошибку на Mac — он не учитывает шрифт. Но по какой-то причине, если я также изменю цвет шрифта и цвет фона в моем стиле, тогда он начинает учитывать шрифт.

Ещё вопросы

• 1 оператор if не работает с целочисленными значениями
• 1 Как я могу протестировать простое серверно-клиентское приложение на своем домашнем компьютере?
• 0 Хотите показать 3 записи в каждой строке таблицы в виде трех столбцов
• 1 Могут ли непредсказуемо типизированные аргументы обрабатываться в службе WCF?
• 0 Холст различной формы с плагином fabricjs
• 0 Объединение таблиц SQL и автозаполнение новых записей
• 0 Node / MySQL — код: «ER_PARSE_ERROR», при попытке вставить ~ 800 записей
• 0 Существует ли кроссплатформенная библиотека для событий файловой системы?
• 0 Обсуждение проблем strtotime, например, «этот день х», когда день не = х, дает СЛЕДУЮЩИЙ х. ESOTERIC просьба игнорировать
• 0 Чтение текстового файла в структуру и отображение массива
• 0 PHP время назад (возвращает неверное время)
• 0 Массив ошибок используется как инициализатор, и я не знаю ошибку
• 1 Удаление иконки JOptionPane
• 0 Проблемы с круговыми диаграммами jqplot
• 1 Как я могу получить URL изображений после того, как я загрузил их с циклом for в хранилище Firebase?
• 1 Как собрать 64, а также 32-битный APK с React Native
• 0 Ошибка проверки JQuery при проверке названия отдела
• 0 MySQL объединяет три таблицы
• 0 Простая карусель, которая обновляет свои кнопки навигации с количеством элементов контента
• 0 Может ли PHP использовать переменные до их определения?
• 0 Использование QRegExValidator для QLineEdit
• 1 изменить размер ячейки Excel, чтобы соответствовать изображению
• 0 используя поле AS в предложении WHERE
• 0 вычислить std :: расстояние между двумя std :: reverse_iterators
• 1 Запутывание, e.StackTrace не читается
• 0 PHP-скрипт для записи в базу данных SQL
• 0 Ошибка запуска Kinect Facetracking C ++
• 1 Как реализовать индикатор выполнения в wpf?
• 1 Как исправить исключение NullPointerException в opencv
• 0 JQuery заменяет часть текста в

  на

• 0 Округление до 100 ед.
• 0 ng-options объекта, как получить значение ключа для функции (angularJS)
• 0 Как разместить 4 изменяемых размера div в горизонтальном расположении?
• 1 сериализация и десериализация объектов из разных мест
• 0 Разрешить теги php в htmlpurifier
• 0 Композитор не найден
• 0 Как стилизовать 4 сетки на странице, если на моих страницах более 4 сеток?
• 1 Добавить фильтр в столбец колба + sqlalchemy отношения
• 1 Обязательны ли определения типов для пакетов npm только на компьютере разработчика?
• 1 Как остановить службу переднего плана перед вызовом метода startForeground ()?
• 0 Директива AngularJS — Как я могу сказать, что выражение атрибута полностью оценено?
• 1 Как изменить ширину полосы прокрутки в WPF?
• 1 Обходное окно window.location.hash для chrome / angular2
• 0 Изображения на страницах aspx с мастер-страницей
• 0 Переключение между реализациями функций с помощью указателей функций
• 1 Python — ускорить итерацию панд
• 0 Перегрузка оператора сложения со многими объектами c ++
• 1 Как закрыть терминал при запуске приложения торнадо?
• 0 Выберите primary_keys, которые соответствуют условиям из внешнего ключа другой таблицы
• 0 Как добавить проверку на стороне клиента зависимого ввода с использованием JavaScript и rails?

Источник

Изменение размера текста тега

Всех с наступившими праздниками! Подскажите пожалуйста, а можно ли уменьшить размер текста тега без уменьшения самого поля ввода?

style type="text/css"> .my-input < font: bold 14px; color: green; >/style> input type="text" value="Введите логин" class="my-input">

Хочу сделать размер value 8px, но вместе с этим уменьшается и сам input, что очень неудобно. Да и во всех мануалах пишут что «если размер шрифта изменяется с помощью стилей, ширина input также соответственно меняется».

Может быть, есть какое-то решение?

Изменение размера текста
Здравствуйте. На странице сайта есть блок с виджетами: <aside >

INPUT — Изменение цвета текста/фона, Placeholder & AutoComplete
Как изменить цвет(а) & фон(ы) : Самого поля ввода INPUT Placeholder AutoComplete

Изменение размера текста внутри кнопки submit
Привет всем! Скажите пожалуйста, а можно ли поменять размер текста внутри кнопки submit? Шрифт и.

Изменение цвета фона тега input после заполнения
Подскажите, как изменить фон тега input, после его заполнения.

.my-input { font: bold 14px; color: green; width: 200px; }

Vovan-VE, немного видоизменил твой код:

.my-input { font: bold 8px; color: green; height:20px; width:70px; line-height:12px;/*вертикальное положение текста*/ }

Проблема вот в чём: полностью не вмещается надпись «Введите логин» выводится «Введите л». Причём текст не 8px, а больше (стандартный). Как можно не меняя ширину полностью уместить в нём надпись?

Сообщение от l@pteff

Так по умолчанию (width:auto;) оно так и сделано, чтобы всё вмещалось. Там уВас стоит 70px, вот там и напишите побольше, чтобы влезло.

Получилось! Вместо font написал font-size и размер текста поменялся

.my-input { font-size: 8px; color: green; height:20px; width:70px; line-height:12px;/*вертикальное положение текста*/ }

Изменение размера страницы при фокусе на input (text)
Доброго времени суток, друзья. Прошу помочь. Скажу сразу — я не специалист в веб вёрстке,но.

Изменение шрифта текста в label в зависимости от объёма (размера) текста
Как сделать так, чтобы шрифт текста в label изменялся, в зависимости от label? : Пример того.

Создать меню с командами Input size, Choose, Change, Exit. Изменение размера окна
При выборе команды Exit приложение завершает работу. Команда Change недоступна. При выборе команды.

Создать меню с командами Input size, Choose, Change, Exit. Изменение размера окна
Создать меню с командами Input size, Choose, Change, Exit. При выборе команды Exit приложение.

Источник

HTML Font Size – How to Change Text Size with an HTML Tag

Joel Olawanle

When you add text to your HTML file with an HTML tag, you won’t always want the text to remain the default size. You’ll want to be able to adjust how the text displays in the browser.

In this article, you will learn how to change the text size with an HTML tag.

Before you proceed, it is essential to know that there is only one way we can do this: through CSS’s font-size property. We can use the font-size property through inline, internal, or external styling.

In the past, we could adjust text size within our HTML tag without using CSS. But that was before HTML5. Then we added text using the tag, which can take in an attribute of size as seen below:

This size attribute can take in value from 1-7 in which the text size increases from 1 to 7. But like I said, this has long been depreciated, and most people don’t even know it existed.

In case you are in a rush to see how you can change the size of your text, then here it is:

// Using inline CSS 
Hello World!
 // Using internal/external CSS selector

Suppose you are not in a rush. Let’s briefly dive right in.

How to Change Text Size With Inline CSS

Inline CSS allows you to apply styles to specific HTML elements. This means we are putting CSS into an HTML tag directly. We use the style attribute, which now holds all our styling.

We use the font-size property alongside our value to change the text size using inline CSS. This value can use any of your preferred CSS units such as em, px, rem, and so on.

 
Hello World!
 
Any text whose font we want to change
 

A perfect syntax would be:

How to Change Text Size With Internal or External CSS

The approach you use to change text size in internal and external CSS styling is similar, since you use a selector. The general syntax for this is:

The selector can either be our HTML tag or maybe a class or an ID. For example:

// HTML 
Any text whose font we want to change
 // CSS p

// HTML 
Any text whose font we want to change
 // CSS .my-paragraph

Wrapping Up

In this article, you learned how to change the font/text size of an HTML element using CSS. You also saw how developers did it before the introduction of HTML5.

Also, keep in mind that it’s always better to style your HTML elements using internal or external styling, as it offers a lot of flexibility compared to inline styling.

For example, you can make use of one CSS class for all your p tags rather than having to add inline styles to all your p tag elements.

Using inline styles is not considered best practice because it results in a lot of repetition – you cannot reuse the styles elsewhere. To learn more, you can read my article on Inline Style in HTML.

I hope this tutorial gives you the knowledge to change the size of your HTML text so you can make it look better.

Источник