Атрибут checked="checked"

Делает чекбокс [type="checkbox"] или радиокнопку [type="radio"] активной. Активных чекбоксов может быть несколько. В группе с одним name должна быть активной только одна радиокнопка.

<input type="checkbox" checked/> <input type="checkbox" checked/> <input type="checkbox"/>
  
<input type="radio" checked name="raz"/> <input type="radio" name="raz"/> <input type="radio" name="raz"/>

Атрибут checked="checked" можно вызывать с помощью label
Если нажать на содержимое label, то сработает input (будет активным или нет).

описание

<label><input type="checkbox"/> описание</label>

описание1  описание2

<label><input type="radio" checked name="dva"/> описание1</label> <label><input type="radio" name="dva"/> описание2</label>

input не обязательно должен располагаться внутри label.

описание

<input type="checkbox" id="raz"/><label for="raz">описание</label>

описание1 описание2

<input type="radio" checked name="dva" id="dva1"/><label for="dva1">описание1</label> <input type="radio" name="dva" id="dva2"/><label for="dva2">описание2</label>

Атрибут checked="checked" можно вызывать с помощью нескольких label
Кнопка будет срабатывать вне зависимости от того, на какой label я нажму и вне зависимости от расстояния между тегами label и input.описание2описание1

<label for="tri">описание2</label><input type="checkbox" id="tri"/><label for="tri">описание1</label>

 описание11 описание21 описание12 описание22

<input type="radio" checked="checked" name="tri" id="tri1"/><input type="radio" name="tri" id="tri2"/>
<label for="tri1">описание11</label> <label for="tri2">описание21</label> <label for="tri1">описание12</label> <label for="tri2">описание22</label>

Псевдокласс :checked

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

<style>
.Green {
background: green;
width: 130px;
height: 130px;
transition: .5s;
}
#chetyre:checked ~ .Green {
background: yellow;
}
</style>

<input type="checkbox" id="chetyre"/>
<div class="Green"></div>
  
<style>
.Green1 {
background: green;
width: 130px;
height: 130px;
transition: .5s;
}
#chetyre2:checked ~ .Green1 {
background: yellow;
}
#chetyre3:checked ~ .Green1 {
background: red;
}
</style>

<input type="radio" checked="checked" name="chetyre"/> <input type="radio" name="chetyre" id="chetyre2"/> <input type="radio" name="chetyre" id="chetyre3"/>
<div class="Green1"></div>

<style>
#link {
position: relative;
}
#link a {
pointer-events: none;
}
#link:hover:before {
display: block;
content: "Подтвердите своё согласие с условиями договора";
position: absolute;
top: 0; left: 50%;
transform: translate(-50%, calc(-100% - 10px));
border-radius: 3px;
padding: 10px;
background: #f7f7f7;
box-shadow: 0 0 2px;
}
#link:hover:after {
display: block;
content: "";
position: absolute;
top: 0; left: 50%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 10px;
border-color: #f7f7f7 transparent transparent transparent;
}
#linkDa:checked ~ #link a {
pointer-events: auto;
}
#linkDa:checked ~ #link:after, #linkDa:checked ~ #link:before {
content: none;
}
</style>
<input type="checkbox" id="linkDa"/><label for="linkDa">Я ознакомлен и принимаю условия договора</label><br>
<span id="link"><a href="#">ссылка</a></span>

:checked и селекторы в Google Chrome

Не работает

<style>
#vosem:checked + label button {
color: red;
}
</style>


<input type="checkbox" id="vosem"/><label for="vosem"><button>описание</button></label>

Работает

<style>
#sem + label {
position: relative;
z-index: 1;
}
#sem + label button {
position: relative;
z-index: -1;
}
#sem:checked + label button {
color: green;
}
</style>


<input type="checkbox" id="sem"/><label for="sem"><button>описание</button></label>

Красивые чекбоксы-переключатели «ВЫКЛ ВКЛ». Как задать свой стиль checkbox
Я предпочитаю стандартный вид input, но к этому, этому и этому не осталась равнодушна и приложила свою руку к оформлению и стилизации checkbox. Можно убирать саму кнопку и задать свой стиль :before у label.

ON Проверка чекбокса на включение/отключение
Большинство вещей не решить только CSS. Нужно подключать JavaScript. 

<input type="checkbox" id="shest0">


<script>
var c = document.querySelector('#shest0');
c.onclick = function() {
if (c.checked) {
alert( 'чекбокс включён' );
} else {
alert( 'чекбокс выключён' );
}
}
</script>

Иногда нужно так 

<input type="checkbox" id="shest001">


<script>
var c = document.querySelector('#shest001');
c.onclick = function() {
alert( 'чекбокс выключён' );
if (c.checked) {
alert( 'чекбокс включён' );
}
}
</script>

Если группа 

<input type="checkbox" name="shest01">
<input type="checkbox" name="shest01">


<script>
var gr = document.getElementsByName('shest01');
window.onclick = function() {
for(var i=0; i<gr.length; i++)
if (gr[i].checked) {
alert( 'чекбокс включён' );
} else {
alert( 'чекбокс отключён' );
}
}
</script>

Или так 

<input type="checkbox" name="shest02">
<input type="checkbox" name="shest02">


<script>
var matches; // matchesSelector на момент написания статьи поддерживается только с префиксами
(function(doc) {
matches =
doc.matchesSelector ||
doc.webkitMatchesSelector ||
doc.mozMatchesSelector ||
doc.oMatchesSelector ||
doc.msMatchesSelector;
})(document.documentElement);


document.addEventListener('click', function(e) {
if ( matches.call( e.target, '[name="shest02"]:checked' ) ) {
alert( 'чекбокс включён' );
}
}, false);
</script>

Или так  . alert появляется по нарастающей. Если одна галочка, то одно сообщение, если три галочки, то три сообщения.

<input type="checkbox" name="shest03" onclick="klik();">
<input type="checkbox" name="shest03" onclick="klik();">
<input type="checkbox" name="shest03" onclick="klik();">


<script>
function klik() {
var c = [].filter.call(document.querySelectorAll('[name="shest03"]'), function(e) {return e.checked == true;});
c.forEach(function(eC) {
alert('чекбокс включён');
});
}
</script>

Проверить все ли чекбоксы помечены

<input type="checkbox" onclick="klik1();" name="shest04">
<input type="checkbox" onclick="klik1();" name="shest04">
<input type="checkbox" onclick="klik1();" name="shest04">


<script>
var vse = document.getElementsByName('shest04');


function klik1() {
if (Array.prototype.every.call(vse, function(e) {return e.checked == true;})) {
alert( 'все чекбоксы включёны' );
} else {
alert( 'нажмите все флажки' );
}
}
</script>

Второй вариант можно увидеть в примере ниже.
Установить checked в checkbox

<input type="checkbox" id="shest10">

<script>
function RAZ911() {
var c = document.querySelector('#shest10');
if (!c.checked) c.checked = true; // поставить checked, если он не установлен
}
RAZ911();
</script>

Установить checked в radio

<input type="radio" name="shest10"> <input type="radio" name="shest10">

<script>
function RAZ911() {
var c = document.getElementsByName('shest10');
if (!c[1].checked) c[1].checked = true; // поставить checked на второй input, если он не установлен
}
RAZ911();
</script>

Выделить все checkbox одним нажатием кнопки
Задача:
если отметить все checkbox, то будет отмечен и главный,
если снять checked хотя бы с одного checkbox группы, то будет снят checked и с общего чекбокса,
если будет поставлена/убрана галочка с основного чекбокса, то автоматом будут убраны/установлены все флажки второстепенных checkbox.
Check all  

<fieldset id="shest">
<legend><input type="checkbox"> Check all</legend>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</fieldset>


<script>
var main = document.querySelector('#shest legend [type="checkbox"]'),
all = document.querySelectorAll('#shest > [type="checkbox"]');


for(var i=0; i<all.length; i++) { // 1 и 2 пункт задачи
all[i].onclick = function() {
var allChecked = document.querySelectorAll('#shest > [type="checkbox"]:checked').length;
main.checked = allChecked == all.length;
main.indeterminate = allChecked > 0 && allChecked < all.length;
}
}


main.onclick = function() { // 3
for(var i=0; i<all.length; i++) {
all[i].checked = this.checked;
}
}
</script>

Ограничить область действия функции JavaScript. Функция исполняется только внутри конкретного тега
Если нужно несколько fieldset, то узнаём его порядковый номер при наведении на него курсора мышки и исполняем функции, если он имеет класс shest1.
Первая форма: Check all   Check all  Вторая форма: Check all   Check all  
Первая форма:

<form>
<fieldset class="shest1">
<legend><input type="checkbox"> Check all</legend>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
</fieldset>
<fieldset class="shest1">
<legend><input type="checkbox"> Check all</legend>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
</fieldset>
</form>
Вторая форма:
<form>
<fieldset class="shest1">
<legend><input type="checkbox"> Check all</legend>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
</fieldset>
<fieldset class="shest1">
<legend><input type="checkbox"> Check all</legend>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
</fieldset>
</form>


<script>
for (var u = document.getElementsByTagName("form"), i = 0; i < u.length; i++)
u[i].onmouseover = function (b) {
l = u[i].getElementsByTagName("fieldset");
for (var k = 0; k < l.length; k++)
if (l[k].className == "shest1") l[k].onmouseover = function (a) {
var main1 = document.querySelector('form:nth-of-type('+(b+1)+') fieldset:nth-of-type('+(a+1)+') legend [type="checkbox"]'),
all1 = document.querySelectorAll('form:nth-of-type('+(b+1)+') fieldset:nth-of-type('+(a+1)+') label [type="checkbox"]');
for(var j=0; j<all1.length; j++)
all1[j].onclick = function() {
var allChecked1 = document.querySelectorAll('form:nth-of-type('+(b+1)+') fieldset:nth-of-type('+(a+1)+') label [type="checkbox"]:checked').length;
main1.checked = allChecked1 == all1.length;
main1.indeterminate = allChecked1 > 0 && allChecked1 < all1.length;
}
main1.onchange = function() {
for(var j=0; j<all1.length; j++)
all1[j].checked = this.checked;
}
}(k)
}(i)
</script>

Но лучше с помощью nextElementSibling, previousElementSibling, parentNode. См. код дерева.
Дерево из checkbox
Задача:
если хотя бы один чекбокс прямого потомка выделен, то родитель помечен :indeterminate,
если все чекбоксы прямого потомка выделены, то родитель помечен галочкой :checked,
родитель отвечает за снятие/установку галочек всех дочерних чекбоксов,
семантический код,
у дерева может быть неограниченное число уровней, но скрипт и CSS при этом не увеличиваются.
Что не удалось:
если кликнуть по 2, а потом снять галку с 2.1.1, то у 2 и 2.1 будет :indeterminate. Всё верно. Но, если затем нажать на 2, то у 2.1 :indeterminate должно поменяться на :checked, а этого не происходит.
 1 2 2.1 2.1.1 2.1.1.1 2.1.1.2 2.1.1.3 2.1.2 2.1.3 2.2 2.3 2.4 3 3.1 3.2 3.3

<style>
[name="Tree"] fieldset {border: none;}
[name="Tree"] label:after {content: '\A'; white-space: pre;} /* после label идёт как бы br */


/* если нужно скрыть дочерние чекбоксы, если на родителе не стоит флажок или :indeterminate*//*
[name="Tree"] fieldset fieldset {padding-left: 20px; display: none;}
[name="Tree"] [type="checkbox"]:checked + label + fieldset,
[name="Tree"] [type="checkbox"]:indeterminate + label + fieldset {display: block;}
*/


</style>
<form name="Tree">
<fieldset>
<label><input type="checkbox"> 1</label>
<label><input type="checkbox"> 2</label>
<fieldset>
<label><input type="checkbox"> 2.1</label>
<fieldset>
<label><input type="checkbox"> 2.1.1</label>
<fieldset><label><input type="checkbox"> 2.1.1.1</label>
<label><input type="checkbox"> 2.1.1.2</label>
<label><input type="checkbox"> 2.1.1.3</label>
</fieldset>
<label><input type="checkbox"> 2.1.2</label>
<label><input type="checkbox"> 2.1.3</label>
</fieldset>
<label><input type="checkbox"> 2.2</label>
<label><input type="checkbox"> 2.3</label>
<label><input type="checkbox"> 2.4</label>
</fieldset>
<label><input type="checkbox"> 3</label>
<fieldset>
<label><input type="checkbox"> 3.1</label>
<label><input type="checkbox"> 3.2</label>
<label><input type="checkbox"> 3.3</label>
</fieldset>
</fieldset>
</form>


<script>
var t = document.forms.Tree;
var fieldset = [].filter.call(t.querySelectorAll('fieldset'), function(element) {return element;});
fieldset.forEach(function(eFieldset) {
var main = [].filter.call(t.querySelectorAll('[type="checkbox"]'), function(element) {return element.parentNode.nextElementSibling == eFieldset;});
main.forEach(function(eMain) {
var all = eFieldset.querySelectorAll('[type="checkbox"]');
eFieldset.onchange = function() {
var allChecked = eFieldset.querySelectorAll('[type="checkbox"]:checked').length;
eMain.checked = allChecked == all.length;
eMain.indeterminate = allChecked > 0 && allChecked < all.length;
}
eMain.onclick = function() {
for(var i=0; i<all.length; i++)
all[i].checked = this.checked;
}
});
});
</script>

Вот до такой удачной реализации (мало кода для столь объёмного элемента) я дошла путём проб и ошибок. Именно поэтому здесь выложено больше, чем нужно. Это варианты, которые я прорабатывала.
Как сделать полноценное дерево из checkbox
Если дерево большое, то вложенные пункты лучше прятать. В стилях предыдущей реализации в комментариях к коду CSS показано как. Минус того метода: нажмёшь 2, а потом убираешь галочки с 2.2, 2.3, 2.4 чтобы осталась галка только на 2.1. Поэтому рядом нужно поставить плюс/минус. Здесь совсем не заметен недостаток, озвученный выше.
плюсик и минус работают только если ни один из потомков не выделен,
если убрать выделение со всех пунктов, то список скроется, у родителя не будет checked,
если поставить флажок на родителя, то будут выделены все потомки, но показаны только дочерние.
если убрать флажок с родителя, то и потомки не будут выделены, кроме того они будут скрыты.
доработав код, можно чтобы при переходе по разным ссылкам, расположенных, скажем, на разных страницах, на страницу дерева с чекбоксами, раскрывалось дерево на нужном уровне, помечались требуемые чебоксы галочками.

<style>
.treeHTML { /* вся форма */
line-height: normal;
}
.treeHTML label { /* пункты и соединяющие их линии */
position: relative;
display: block;
padding: 0 0 0 1.2em;
}
.treeHTML label:not(:nth-last-of-type(1)) {
border-left: 1px solid #94a5bd;
}
.treeHTML label:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1.1em;
height: .5em;
border-bottom: 1px solid #94a5bd;
}
.treeHTML label:nth-last-of-type(1):before {
border-left: 1px solid #94a5bd;
}
.treeHTML fieldset,
.treeHTML fieldset[class=""] .razvernut { /* списки */
position: absolute;
visibility: hidden;
margin: 0;
padding: 0 0 0 2em;
border: none;
}
.treeHTML fieldset:not(:last-child) {
border-left: 1px solid #94a5bd;
}
.treeHTML .razvernut {
position: relative;
visibility: visible;
}
.treeHTML > fieldset > legend,
.treeHTML .razvernut > fieldset > legend { /* плюс */
position: absolute;
left: -5px;
top: 0;
height: 7px;
width: 7px;
margin-top: -1em;
padding: 0;
border: 1px solid #94a5bd;
border-radius: 2px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-color: #fff;
background-image: linear-gradient(to left, #1b4964, #1b4964), linear-gradient(#1b4964, #1b4964), linear-gradient(315deg, #a0b6d8, #e8f3ff 60%, #fff 60%);
background-size: 1px 5px, 5px 1px, 100% 100%;
visibility: visible;
cursor: pointer;
}
.treeHTML fieldset[class=""] .razvernut fieldset legend {
visibility: hidden;
}
.treeHTML .razvernut > legend { /* минус */
background-image: linear-gradient(#1b4964, #1b4964) !important;
background-size: 5px 1px !important;
}
</style>


<form name="Tree1" class="treeHTML" class="razvernut">
<label><input type="checkbox"> 1</label>
<label><input type="checkbox"> 2</label>
<fieldset><legend></legend>
<label><input type="checkbox"> 2.1</label>
<fieldset><legend></legend>
<label><input type="checkbox"> 2.1.1</label>
<fieldset><legend></legend>
<label><input type="checkbox"> 2.1.1.1</label>
<label><input type="checkbox"> 2.1.1.2</label>
<label><input type="checkbox"> 2.1.1.3</label>
</fieldset>
<label><input type="checkbox"> 2.1.2</label>
<label><input type="checkbox"> 2.1.3</label>
</fieldset>
<label><input type="checkbox"> 2.2</label>
<label><input type="checkbox"> 2.3</label>
<label><input type="checkbox"> 2.4</label>
</fieldset>
<label><input type="checkbox"> 3</label>
<fieldset><legend></legend>
<label><input type="checkbox"> 3.1</label>
<label><input type="checkbox"> 3.2</label>
<label><input type="checkbox"> 3.3</label>
</fieldset>
</form>


<script>
var t = document.forms.Tree1;
[].forEach.call(t.querySelectorAll('fieldset'), function(eFieldset) {
var main = [].filter.call(t.querySelectorAll('[type="checkbox"]'), function(element) {return element.parentNode.nextElementSibling == eFieldset;});
main.forEach(function(eMain) {
var l = [].filter.call(eFieldset.querySelectorAll('legend'), function(e) {return e.parentNode == eFieldset;});
l.forEach(function(eL) {
var all = eFieldset.querySelectorAll('[type="checkbox"]');
eL.onclick = Razvernut;
eFieldset.onchange = Razvernut;
function Razvernut() {
var allChecked = eFieldset.querySelectorAll('[type="checkbox"]:checked').length;
eMain.checked = allChecked == all.length;
eMain.indeterminate = allChecked > 0 && allChecked < all.length;
if (eMain.indeterminate || eMain.checked || ((eFieldset.className == '') && (allChecked == "0"))) {
eFieldset.className = 'razvernut';
} else {
eFieldset.className = '';
}
}
eMain.onclick = function() {
for(var i=0; i<all.length; i++)
all[i].checked = this.checked;
if (this.checked) {
eFieldset.className = 'razvernut';
} else {
eFieldset.className = '';
}
}
});
});
});
</script>

Деактивировать все флажки, кроме нескольких отмеченных
Как задать максимально возможное число чекбоксов, на которые можно установить галки? То есть дать выбрать только 3 любых чекбокса из 5 возможных. Свой выбор можно менять.

<form name="Form">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</form>


<script>
var f = document.forms.Form;
f.onchange = function() {
var n = f.querySelectorAll('[type="checkbox"]'),
l = f.querySelectorAll('[type="checkbox"]:checked');
for(var j=0; j<n.length; j++)
if (l.length >= 3) { // если отметить три и более галочки
n[j].disabled = true; // все чекбоксы становятся disabled
for(var i=0; i<l.length; i++)
l[i].disabled = false; // но disabled убирается с помеченных галочками чекбоксов
} else {
n[j].disabled = false; // если выделить менее трёх галочек, то disabled снимается со всех чекбоксов
}
}
</script>

Я, конечно, понимаю, что запись странновата, только вот .querySelectorAll('[type="checkbox"]:not([checked])') работает только для изначально установленных флажков.
Как посчитать сумму значений value у выбранных чекбоксов
Дальнейшие примеры при создании калькулятора или формы заказа на JavaScript
Сумма: 0

<form name="Sum">
<input type="checkbox" value="1"/>
<input type="checkbox" value="2"/>
<input type="checkbox"/>
<input type="checkbox" value=""/>
<input type="checkbox" value="3"/>
<input type="checkbox" value="4"/>
<input type="checkbox" value="5"/>
<output id="rezultat">Сумма: 0</output>
</form>

<script>
var s = document.forms.Sum,
d = s.querySelectorAll('input[type="checkbox"]:not([value]), input[type="checkbox"][value=""]');
for (var i = 0; i < d.length; i++) // чтобы не было написано NaN, убираем в disabled пункты, где не прописаны значения
d[i].disabled = true;
s.onchange = function() { // начало работы функции сложения
var n = s.querySelectorAll('[type="checkbox"]'),
itog = 0;
for(var j=0; j<n.length; j++)
n[j].checked ? itog += parseFloat(n[j].value) : itog;
document.getElementById('rezultat').innerHTML = 'Сумма: ' + itog;
}
</script>

Строка поиска <input type="number">

<form>
<input type="number">
<input type="submit">
</form>

Поле <input type="number"> не подходит для текстовых строк, состоящих из 16 и более цифр, например, номера пластиковой карты, так как длинные числа от 9007199254740991 могут округляться.

Количество товара

1. увеличение и уменьшение значения числового поля с помощью кнопок пошагового изменения;

2. сообщение об ошибке при вводе букв и дробных чисел;

3. минимальное значение 1 шт.

<form><input type="number" min="1" value="1"> шт</form>

Чётные положительные целые числа

<form><input type="number" step="2" min="2"></form>

Нечётные положительные целые числа

<form><input type="number" step="2" min="1"></form>

Круглые числа

<form><input type="number" step="10"></form>

Десятичная дробь с плавающей запятой

<form><input type="number" step="any"></form>

Денежный формат цены: «рубли,копейки» с двумя знаками после запятой ₽

<form><input type="number" step="0.01" min="0" placeholder="0,00"> ₽</form>

Ограничить количество символов в поле до 5

<form><input type="number" min="-9999" max="99999"></form>

Уменьшить длину <input type=number>

Атрибуты minlength, maxlength  и size не работают.

Необходимое количество символов в поле определяется атрибутами min, max и step: 

<!-- Достаточно выделить место на 6 символов -->
<input type="number" min="0" max="100" step="0.01"/>

Указать ширину в CSS (свойство width):

<style>
#dva {
width: 6em;
}
</style>
<input type="number" min="0" max="100" step="any" id="dva"/>

Стрелки у <input type=number>

Чтобы стрелочки были изначально, а не только при :hover и :focus в Chrome

<style>
#pyat::-webkit-inner-spin-button,
#pyat::-webkit-outer-spin-button  {
opacity: 1;
}
</style>
<input type="number" id="pyat"/>

Убрать стрелки

<style>
.raz {
-moz-appearance: textfield;
}
.raz::-webkit-inner-spin-button {
display: none;
}
</style>

<input type="number" class="raz"/>

Стилизация стрелок «вверх»/«вниз» CSS

<style>
#raz {
position: relative;
display: inline-block;
}
#raz input {
font-size: 1em;
-moz-appearance: textfield;
}
#raz input::-webkit-inner-spin-button {
display: none;
}
#raz span {
position: absolute;
}
@supports (clip-path: polygon(50% 30%, 10% 90%, 90% 90%)) {
#raz input {
padding-right: 1em;
}
#raz span {
right: 0;
width: 1em;
height: 50%;
background: rgb(70,70,70);
cursor: pointer;
}
#raz span:hover {
background: red;
}
#raz span:nth-of-type(1) {
top: 0;
clip-path: polygon(50% 30%, 10% 90%, 90% 90%);
}
#raz span:nth-of-type(2) {
bottom: 0;
clip-path: polygon(50% 70%, 10% 10%, 90% 10%);
}
}
</style>
<span id="raz">
<input type="number" value="0">
<span onclick="this.previousElementSibling.stepUp()"></span>
<span onclick="this.previousElementSibling.previousElementSibling.stepDown()"></span>
</span>

Запретить ввод в поле, чтобы можно было пользоваться только кнопками редактирования

- +

 <style>
.raz {
all: unset;
-moz-appearance: textfield;
width: 3em;
text-align: center;
}
.raz::-webkit-inner-spin-button {
display: none;
}
</style>

<button type="button" onclick="this.nextElementSibling.stepDown()">-</button>
<input type="number" min="0" max="100" value="1" readonly class="raz">
<button type="button" onclick="this.previousElementSibling.stepUp()">+</button>

Вместо <input type="number"> использовать <input type="text">

Виртуальная клавиатура с дробно-числовым вводом

Атрибут inputmode  плохо поддерживается браузерами.

<input inputmode="decimal">

На IOS (iPhone) если атрибут patternимеет значение [0-9]* или \d*, то на мобильном телефоне будет дана цифровая клавиатура.

Для отправки формы, поле должно содержать только цифры

<form><input inputmode="decimal" pattern="-?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?"></form>

Функционал с JavaScript

При наборе не числа value возвратит пустое значение. Браузер может позволить/вынудить пользователя набрать число с запятой «20,5», но value примет значение с точкой «20.5», искл., IE.

 value (строка) =""; valueAsNumber (число) ="";

Запретить ввод букв

<input type="number" id="check" step="any"/>
<script>
document.getElementById('check').onkeydown = function (e) {
return !(/^[А-Яа-яA-Za-z ]$/.test(e.key)); // IE > 9
}
</script>

Только одна точка или одна запятая

<input type="number" step="any" id="shest2"/>

<script>
document.getElementById('shest2').onkeydown = function (e) {
if (e.currentTarget.value.indexOf(".") != '-1' || e.currentTarget.value.indexOf(",") != '-1') {
return !(/[.,]/.test(e.key));
}
}
</script>

Ограничить ввод двумя знаками после запятой

Цифры, вносимые после 2-го символа после запятой, сразу обрезаются, дабы не совершать лишних телодвижений.

<input type="number" oninput="up(this)" step="0.01"/>

<script>
function up(e) {
if (e.value.indexOf(".") != '-1') {
e.value=e.value.substring(0, e.value.indexOf(".") + 3);
}
}
</script>

Обрезать последний лишний символ

<input type="number" step="any" id="shest1"/>

<script>
document.getElementById('shest1').oninput = function () {
if (this.value.length > 7) this.value = this.value.substr(0, 7); // в поле можно ввести только 7 символов
}
</script>

Разделение цифр пробелом

Наберите любое многозначное число

<input oninput="this.nextElementSibling.innerHTML = new Intl.NumberFormat('ru').format(this.valueAsNumber)" type="number">
<output> </output>