I want to know how to customize the arrows of a spin box.
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: inner-spin-button !important;
opacity: 1 !important;
}
<input type="number" />
This is what I want to get.
Where should I start??
(Do I have to use jQuery widget or javascript to customize it?)
Screenshot (Chrome, macOS):
Code:
input[type="number"] {
height: 32px;
border-radius: 4px;
border: 1px solid #d8d8d8;
position: relative;
text-align: center;
font-size: 20px;
width: 80px;
outline: none;
background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2050%2067%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%222%22%3E%3Cline%20x1%3D%221%22%20x2%3D%2250%22%20y1%3D%2233.5%22%20y2%3D%2233.5%22%20stroke%3D%22%23D8D8D8%22%2F%3E%3Cpolyline%20transform%3D%22translate(25%2020)%20rotate(45)%20translate(-25%20-20)%22%20points%3D%2219%2026%2019%2014%2032%2014%22%20stroke%3D%22%23000%22%2F%3E%3Cpolyline%20transform%3D%22translate(25%2045)%20rotate(225)%20translate(-25%20-45)%22%20points%3D%2219%2052%2019%2039%2032%2039%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-position: center right;
background-size: contain;
background-repeat: no-repeat;
caret-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
opacity: 1 !important;
background: transparent !important;
border-width: 0px;
margin: 0;
border-left: 1px solid #d8d8d8;
height: 34px;
width: 23px;
cursor: pointer;
}
<input type="number" value="1" />
So, it can be done. But customizations like this are usually very brittle (even if you add in the necessary cross-browser properties, which I haven't done; this only works in webkit), and can hurt usability. You're probably better off using the platform's native controls.
My answer try of fix your problem with css pure, for example with input[type=number] {} you can put all of rules to change the look of the input
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: inner-spin-button !important;
opacity: 1 !important;
width: 50px;
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: blue !important;
border: 2.5px solid red !important;
}
input[type=number] {
position: relative;
padding: 5px;
width: 50px;
padding-right: 25px;
height: 30px;
text-align: center;
font-family: sans-serif;
font-size: 2rem;
border: 1px solid #9c9c9c !important;
border-radius: 0.2em;
}
<input type="number" />
Related
Per the code snippet below, I am trying to create a tool tray with vertical sliders, styled like procreates ui.
When I rotate the tray 90 degrees using transforms to get everything vertical, the sliders break on mobile (any touch device), I can click them to position but pressing and sliding breaks. If I remove the rotate class, all works fine.
Tested on a wacom touch screen monitor, ipad pro and samsung z fold 3, all touch devices the slider is broken on though works as expected with mouse. Pen devices seem to also break, unable to move the sliders smoothly.
Any help fixing this or a better approach would be greatly welcome, trying to get this to work without javascript
/* Desperate to remove focus outline in firefox */
::-moz-focus-inner {
outline:0;
}
:focus {
outline:0;
}
.topcoat-range-input--vertical {
position: relative;
/*padding: 0;
margin: 0;*/
border: none;
box-sizing: border-box;
background-clip: padding-box;
vertical-align: top;
outline: none;
-webkit-appearance: none;
border-radius: 4px;
border: 1px solid #a5a8a8;
background: #CCd3d7d7;
height: 2rem;
border-radius: 4px;
}
.topcoat-range-input--vertical::-webkit-slider-thumb{
cursor: pointer;
-webkit-appearance: none;
}
.topcoat-range-input--vertical::-moz-range-thumb {
cursor: pointer;
}
/*.topcoat-range-input--vertical {
border-radius: 4px;
border: 1px solid #a5a8a8;
background: #d3d7d7;
height: 2rem;
border-radius: 4px;
}*/
.topcoat-range-input--vertical::-webkit-slider-thumb {
height: 2rem;
width: 1.2rem;
border: 1px solid rgba(0,0,0,0.36);
border-radius: 6px;
background: #e5e9e8;
background-size: 7px 18px;
box-shadow: inset 0 1px white;
}
.topcoat-range-input--vertical::-moz-range-thumb {
height: 2rem;
width: 1.2rem;
border: 1px solid rgba(0,0,0,0.36);
border-radius: 6px;
background: #e5e9e8;
background-size: 7px 18px;
box-shadow: inset 0 1px white;
}
::-ms-tooltip,
::-ms-fill-lower {
display: none;
}
.topcoat-range-input--vertical {
/*display: block;
box-sizing: border-box;*/
vertical-align: middle;
}
#tool-setting-palette{
background: #000000;
opacity: 0.8;
height: fit-content;
width: fit-content;
padding: .3em;
border-radius: 0.5em;
position: fixed;
left: 2em;
bottom: 0;
}
.btn {
background-color: transparent;
width: 1.5em;
height: 1.5em;
border: none;
color: white;
font-size: 1.2em;
cursor: pointer;
vertical-align: middle;
}
/* Darker background on mouse-over */
.btn:hover {
color: RoyalBlue;
}
.btn:active {
color: Blue;
transform-origin: center;
transform:scale(0.9);
}
.rotate-rev-90{
transform-origin: center left;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.rotate-90, .rotate-90 .btn:hover, .rotate-90 .btn:active{
transform-origin: center;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
<div id="tool-setting-palette" class="rotate-rev-90">
<button id="redo-btn" type="button" value="" class="btn rotate-90"><i class="fa fa-repeat"></i></button>
<button id="undo-btn" type="button" value="" class="btn rotate-90"><i class="fa fa-undo"></i></button>
<input type='range' class='topcoat-range-input--vertical'>
<input type='range' class='topcoat-range-input--vertical'>
</div>
https://codepen.io/taibhse-designs/pen/zYLxvOj
I am making a styled rounded checkbox for woocommerce . The Problem is my checkbox is now fill inside . How Can I make it thin inside without filling?
input#createaccount:checked {
background-color: #253849;
}
input#createaccount{
position: relative;
margin-left: 4px;
width: 25px;
float: left;
margin: 2px 10px 2px 1px;
height: 25px;
border-radius: 50%;
vertical-align: middle;
border: 4px solid #295282;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
One way to do this without javascript would be to create one wrapper element with input and one more element as a indicator for checkbox state. That way you can use selector input:checked + nextElement and change style of second element based on checkbox status.
Then you just have to hide checkbox with opacity: 0. With this approach you can also use transitions and transforms on the inner element.
.checkbox-el {
position: relative;
margin-left: 4px;
width: 25px;
float: left;
margin: 2px 10px 2px 1px;
height: 25px;
border-radius: 50%;
vertical-align: middle;
border: 2px solid #295282;
-webkit-appearance: none;
outline: none;
cursor: pointer;
padding: 5px;
}
.checkbox-el input {
width: 100%;
height: 100%;
position: absolute;
top: -3px;
left: -3px;
z-index: 5;
opacity: 0;
cursor: pointer;
}
.checkbox-circle {
position: relative;
border-radius: 50%;
width: 100%;
height: 100%;
z-index: 1;
transform: scale(0.5);
transition: all 0.25s ease-in;
}
.checkbox-el input:checked + .checkbox-circle {
background-color: #253849;
transform: scale(1)
}
<span class="checkbox-el">
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
<div class="checkbox-circle"></div>
</span>
Simple adding inner shadow solve the issue
box-shadow: inset 0px 0px 0px 5px #ffffff;
input#createaccount:checked {
background-color: #253849;
box-shadow: inset 0px 0px 0px 5px #ffffff;
transition: 0.5s;
}
input#createaccount{
position: relative;
margin-left: 4px;
width: calc(3em - 4px);
height: calc(3em - 4px);
float: left;
margin: 4px 10px 2px 1px;
border-radius: 50%;
vertical-align: middle;
border: 5px solid #295282;
-webkit-appearance: none;
outline: none;
cursor: pointer;
transition: 0.5s;
}
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
Here is another trick with a simple background where you color the content-box and you animate the padding. You will also have transparency:
input#createaccount:checked {
padding:3px;
}
input#createaccount {
width: 25px;
float: left;
margin: 2px 10px 2px 1px;
height: 25px;
border-radius: 50%;
vertical-align: middle;
border: 4px solid #295282;
-webkit-appearance: none;
outline: none;
cursor: pointer;
box-sizing:border-box;
background: #253849 content-box;
padding:8.5px; /* 25/2 - 4 */
transition:0.3s all;
}
body {
background:pink;
}
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
I have a search form that I coded to only include a border-bottom styling. On desktop it appears as I want it to (second photo), but on mobile it's showing a rounded border (first photo). I'm using Chrome on both desktop and iOS mobile...
.search-bar {
height: 60px;
padding:1em;
outline: none;
}
#search {
font-size: 2em;
font-family: Linux Libertine;
position: relative;
top: 50%;
left: 50%;
padding: 30px;
max-width: 600px;
height: 60px;
width: 100%;
transform: translate(-50%, -50%);
display: inline-block;
border: 0;
border-bottom: 5px solid black;
background-color: #fff;
color: #000;
outline: none;
border-radius: 0;
box-shadow: 0;
}
input::placeholder {
font-size: 1em;
font-family: Linux Libertine, times;
color: #D8D8D8;
}
<div class="search-bar">
<input type="search" id="search" placeholder="Enter a keyword" class="keyword" />
</div>
but what mobile are you using? Iphone or android? You see, chrome on iphone actually uses safari to render stuff (in a sense). Apple has round buttons, where as we generally have squared ones. Just use border-radius:0; to fix.
You may also be looking for -webkit-appearance: none; for iphones. I believe that is also a part of the apple experience.
So:
#search {
font-size: 2em;
font-family: Linux Libertine;
position: relative;
top: 50%;
left: 50%;
padding: 30px;
max-width: 600px;
height: 60px;
width: 100%;
transform: translate(-50%, -50%);
display: inline-block;
border: 0;
border-bottom: 5px solid black;
background-color: #fff;
color: #000;
outline: none;
border-radius: 0;
box-shadow: 0;
-webkit-appearance: none;
}
Rather than Is it possible to always show up/down arrows for input "number"?, I want to be able to make up/down arrow much bigger and cleaner.
What I have right now:
I need to make them bigger like this:
you can wrap a input in and element and style it
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>
well, to achieve that you have to play with pseudo elements and some CSS3 tricks.
to create triangle https://css-tricks.com/snippets/css/css-triangle/
to manipulate input number spinners
input[type=number]::-webkit-inner-spin-button {
/* your code*/
}
here is the example.
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">
Another solution, offering uniformity between browsers and more customisation options, would be to use the JQuery UI spinner element.
On opera, i can do the following
<style>
#range{
width: 20px;
heigth: 300px;
}
</style>
<input type="range" id="range" />
and it will render a vertical slider. However, this doesn't seem to work on chrome. Is there a way I can do this? (I'm not looking for any jQuery sliders or anything)
It seems Chromium does not yet implement support for this yet:
See: http://www.chromium.org/developers/web-platform-status/forms
Not available yet
Localization of
Dedicated UIs for color, date, datetime, datetime-local, month, time,
and week types
Automatic switching to vertical range
Value sanitization algorithms
datalist element, list attribute, and list/selectedOption properties
Edit: Vuurwerk indicated that it is actually possible to alter the presentation using the -webkit-appearance: slider-vertical property. Although this does transform it into a vertical slider, I would not recommend doing this, since it will break your layout and doesn't look really pretty: example.
If you really want a vertical slider, use a JavaScript solution. Support for <input type="range" /> is very basic at the moment anyway, so you are probably better off with a graceful degradation or progressive enhancement approach.
-webkit-appearance: slider-vertical;
Maybe with a css transform ?
-webkit-transform: rotate(90);
Another solution could be to use the slider module from jQuery UI.
http://jqueryui.com/demos/slider/#slider-vertical
input[type='range']{
width:20px;
height:140px;
border:2px solid blue;
display:block;
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
z-index: 0;
}
As Aron has said there is no support for webkit browser.
However this is what i could do for achieving the output.
body {
margin: 50px;
}
.opacitySlider {
position: relative;
transform: rotate(90deg);
width: 125px;
height: 20px;
}
.opacitySlider:before {
content: " ";
left: 10px;
top: 1px;
position: absolute;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 115px solid #ccc;
}
.opacitySlider input[type=range] {
outline: none;
-webkit-appearance: none;
height: 20px;
padding: 0;
width: 125px;
background: transparent;
position: relative;
margin: 0;
cursor: pointer;
}
.opacitySlider input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background: #69a80e;
height: 20px;
width: 20px;
border: 1px solid #fff;
border-radius: 50%;
}
.opacitySlider input[type=range]::-moz-range-track {
border: none;
background-color: transparent;
}
.opacitySlider input[type=range]::-moz-range-thumb {
background: #69a80e;
height: 20px;
width: 20px;
border: 1px solid #fff;
border-radius: 50%;
}
.opacitySlider input[type=range]::-ms-fill-lower, .opacitySlider input[type=range]::-ms-fill-upper {
background: transparent;
}
.opacitySlider input[type=range]::-ms-track {
height: 18px;
border: none;
background-color: transparent;
margin: 0;
}
.opacitySlider input[type=range]::-ms-thumb {
background: #69a80e;
height: 20px;
width: 20px;
border: 1px solid #fff;
border-radius: 50%;
height: 17px;
width: 17px;
}
<div class="opacitySlider">
<input step="any" type="range">
</div>