Сделать стрелку вниз для ввода номера HTML намного больше и чище

Вместо Можно ли всегда показывать стрелки вверх/вниз для ввода номера?, я хочу сделать стрелку вверх/вниз намного больше и чище.

Что у меня есть сейчас:

Мне нужно сделать их больше, вот так:


html css html-input
person Mohammad Naji    schedule 13.04.2015    source источник
comment
Можете ли вы опубликовать код / ​​демо?   -  person G.L.P    schedule 13.04.2015
comment
jsfiddle.net/14p8tkex   -  person Mohammad Naji    schedule 13.04.2015
comment
Какой браузер вы используете? вроде все нормально в хроме   -  person Itay    schedule 13.04.2015
comment
Спасибо, @Itay, что рассказали мне о Chrome. Но даже в хроме контейнер для стрел должен быть шире, а его высота в порядке.   -  person Mohammad Naji    schedule 13.04.2015
comment
HTML5 все еще очень новая спецификация, и реализация элементов управления полностью зависит от браузера. Такие функции, как кнопки, еще не стандартизированы и, вероятно, не будут стандартизированы в течение длительного времени. Если вам нужна такая степень контроля, я бы порекомендовал вам использовать более предсказуемую и настраиваемую библиотеку, например JQuery UI's Spinner< /а>.   -  person JDB still remembers Monica    schedule 13.04.2015
comment
даст дополнительную работу, но как насчет преобразования? jsfiddle.net/14p8tkex/2   -  person vals    schedule 13.04.2015
comment
Да, @vals, в Chrome все в порядке. А как насчет firefox :-/? jsfiddle.net/14p8tkex/4   -  person Mohammad Naji    schedule 13.04.2015

Ответы (3)


arrow_upward
7
arrow_downward

вы можете обернуть ввод и элемент и стилизовать его

div {
  display: inline-block;
  position: Relative;
  border: 2px solid grey;
  border-radius: 10px;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
div:before,
div:after {
  background: white;
  right: 0px;
  width: 30px;
  height: 20%;
  position: absolute;
  pointer-events: none;
}
div:before {
  content: '';
  bottom: 50%;
  background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
  background-size: 20px;
  background-position: center;
}
div:after {
  content: '';
  top: 50%;
  background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
  background-size: 20px;
  transform: rotate(180deg);
  background-position: center;
}
input {
  height: 80PX;
  font-size: 50px;
  outline: 0;
  border: 0;
}
<div>
  <input type="number" value="10" />
</div>

person Vitorino fernandes    schedule 13.04.2015

arrow_upward
3
arrow_downward

Что ж, для этого вам придется поиграть с псевдоэлементами и некоторыми CSS3 трюками.

для создания треугольника https://css-tricks.com/snippets/css/css-triangle/

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

input[type=number]::-webkit-inner-spin-button {
    /* your code*/
}

вот пример.

input {
	  color: #777;
	  width: 2em;
	  font-size: 2em;
	  border-radius: 10px;
	  border: 2px solid #ccc;
	  padding: 5px;
	  padding-left: 10px;
	}
	input[type=number]::-webkit-inner-spin-button {
	  -webkit-appearance: none;
	  cursor: pointer;
	  display: block;
	  width: 10px;
	  text-align: center;
	  position: relative;
	  background: transparent;
	}
	input[type=number]::-webkit-inner-spin-button::before,
	input[type=number]::-webkit-inner-spin-button::after {
	  content: "";
	  position: absolute;
	  right: 0;
	  width: 0;
	  height: 0;
	  border-left: 7px solid transparent;
	  border-right: 7px solid transparent;
	  border-bottom: 10px solid #777;
	}
	input[type=number]::-webkit-inner-spin-button::before {
	  top: 7px;
	}
	input[type=number]::-webkit-inner-spin-button::after {
	  bottom: 7px;
	  transform: rotate(180deg);
	}
<input type="number" value="1">

person singhiskng    schedule 13.04.2015
comment
Если (входной) атрибут font-size: 2em; слишком большой, то стрелки будут слишком близко, попробуйте изменить атрибуты (spin-button::before/after) top: 7px; и внизу: 7px; - person mfruizs2; 29.04.2015

arrow_upward
1
arrow_downward

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

person Eino Gourdin    schedule 23.02.2017