Как убрать стрелки из ввода [type = «number»] в Opera [duplicate]

На этот вопрос уже есть ответ здесь:

Могу ли я скрыть ввод номера HTML5?Спинбокс? 14 ответов

Просто глядя убрать эти стрелки, удобно в определенных ситуациях.

Я хотел бы сохранить браузерОднако осведомленность о том, что контент носит чисто цифровой характер. Так что меняя его наinput[type="text"] не является приемлемым решением.

Теперь, когда Opera основана на webkit, этот вопрос является сложным:Могу ли я скрыть ввод номера HTML5?Спинбокс?

 drumwolf15 янв. 2014 г., 18:34
Я знаю, что это старый вопрос, но на всякий случайОтвет на этот вопрос не поможет?css-tricks.com/snippets/css/turn-off-number-input-spinnersI»
 rekire28 окт. 2012 г., 08:31
Я думаю, что это невозможно, стандарт просто позволяет сравнивать строки.

Ответы на вопрос(3)

Shadow DOM, которые в основном являются элементами DOM на вашей странице, которые скрыты от вас. Если ты'новичок в этой идее, хорошее вступительное чтениеможно найти здесь.

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

Вы можете изменить их в Webkit сейчасс правильными селекторами, но это все еще на ранних стадиях развития. Сам Shadow DOM еще не имеет унифицированных селекторов, поэтому селекторы webkit являются проприетарными (и это не так.это просто вопрос добавления-webkitкак и в других случаях).

Из-за этого кажется вероятным, что Опера просто непока не нашел время добавить это. Однако найти ресурсы о модификациях Opera Shadow DOM сложно. Немногоненадежные интернет-источники янашел все сказать или предположить, что опера нев настоящее время поддерживает манипуляции с Shadow DOM.

Я потратил немного времени на просмотр веб-сайта Opera, чтобы увидеть, есть лиНе стоит упоминать об этом, а также пытаться найти их в «Стрекозе» ... ни в поиске не было удачи. Из-за молчания по этому вопросу и развивающегося характера манипуляций с Shadow DOM + Shadow DOM, кажется, можно сделать безопасный вывод, что вы просто можетесделать это в Opera, по крайней мере, сейчас.

Решение Вопроса

и он, кажется, удаляет их и работает нормально.

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
<input type="number" step="0.01">

Этот урок от CSS Tricks объясняет подробно и также показывает, как их стилизовать

 spacedev03 июл. 2018 г., 17:27
div # floorMapScaleLength input [type = number] :: - webkit-inner-spin-button, div # floorMapScaleLength input [type = number] :: - webkit-external-spin-button {-webkit-Appearance: none; } работал на меня
 Sergey Zhukov08 апр. 2016 г., 08:49
Не работает с Firefox (v 45.0). Ссылка из комментария @ michael-cordingley работает хорошо.
 Michael Cordingley20 июл. 2015 г., 21:19
Потому что не все используют браузер на основе WebKit:stackoverflow.com/questions/23372903/...
 Promo05 апр. 2018 г., 15:49
Действительно используя type = "тел» где вам нужно тип = "число" это семантическая ошибка, приводящая к неправильной клавиатуре на мобильных устройствах.
 Pankaja Gamage02 июн. 2017 г., 12:23
с помощьюtype="tel" на самом деле неправильно, даже вы можете получить работу. Есть разные значения дляinput элементаtype приписывать.Вы можете найти их здесь. всегда лучше использовать правильные способы вместо простых взломов.
 byteC0de25 февр. 2016 г., 14:22
я хочу, чтобы удалить свойство приращения и уменьшения при нажатии стрелки
 Z.T22 февр. 2019 г., 10:21
Я использовал эту штуку, и она работала хорошо, за исключением того, что стрелки были заменены на дефис, поэтому я это сделал и теперь отлично работает: input [type = number] :: - webkit-inner-spin-button , input [type = number] :: - webkit-external-spin-button {-webkit-Appearance: нет; -возможность появления: нет; внешний вид: нет; z-индекс: -999; } Вероятно, только с использованием z-index: -999 также будет работать.
 khargoosh12 апр. 2016 г., 01:45
 хорошо работает во многих ситуациях
 craphunter09 янв. 2015 г., 00:38
Особенно важна ссылка! Спасибо

Этот вопрос в основном дубликатЕсть ли способ скрыть новые элементы управления HTML5 spinbox, показанные в Google Chrome & Opera? но, возможно, не полный дубликат, так как мотивация дана.

Если цель «браузераосведомленность о том, что контент является чисто числовым »тогда вам нужно подумать, что бы это на самом деле значило. Стрелки, или счетчики, в некоторых случаях являются частью более удобного ввода чисел. Другая часть - проверка того, что содержимое является допустимым числом, и в браузерах, которые поддерживают улучшения ввода HTML5, вы можете сделать это, используяpattern приписывать. Этот атрибут также может влиять на третью функцию ввода, а именно на тип виртуальной клавиатуры, которая может появиться.

Например, если ввод будет состоять из пяти цифр (например, почтовые номера в некоторых странах), то может быть адекватным. Конечно, это зависит от реализации, как это будет обрабатываться.

 JayD13 авг. 2014 г., 20:32
Вы можете достичь той же функциональности, которую пытаетесь сохранить, а также удалить блесны ...
 Puce18 февр. 2015 г., 11:25
Вращатели абсолютно бесполезны, если вы хотите вводить большие числа, например денежные суммы. В то же время вам могут понадобиться атрибуты min и max для них. Пример, сколько вы хотите инвестировать? Это будет тысячная сумма, но может иметь минимум 5000 и максимум 20000. Крути это, детка.
 machine yearning22 мая 2018 г., 23:26
@Puce Вы можете добавить произвольные шаги приращения к счетчикам.

Ваш ответ на вопрос