Is it possible to apply a style in the inner "up arrow" and "down arrow" of a <input type="number"> in CSS? I would like to change the background of the up arrow to blue and the down arrow to red. Any ideas?
UPDATE 17/03/2017
Original solution won't work anymore. The spinners are part of shadow dom. For now just to hide in chrome use:
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
<input type="number" />
or to always show:
input[type=number]::-webkit-inner-spin-button {
opacity: 1;
}
<input type="number" />
You can try the following but keep in mind that works only for Chrome:
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display:block;
width:8px;
color: #333;
text-align:center;
position:relative;
}
input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
content: "^";
position:absolute;
right: 0;
}
input[type=number]::-webkit-inner-spin-button:before {
top:0px;
}
input[type=number]::-webkit-inner-spin-button:after {
bottom:0px;
-webkit-transform: rotate(180deg);
}
<input type="number" />
For Mozilla
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
}
For Chrome
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
I modified #LcSalazar's answer a bit... it's still not perfect because the background of the default buttons can still be seen in both Firefox, Chrome & Opera (not tested in Safari); but clicking on the arrows still works
Notes:
Adding pointer-events: none; allows you to click through the overlapping button, but then you can not style the button while hovered.
The arrows are visible in Edge, but don't work because Edge doesn't use arrows. It only adds an "x" to clear the input.
.number-wrapper {
position: relative;
}
.number-wrapper:after,
.number-wrapper:before {
position: absolute;
right: 5px;
width: 1.6em;
height: .9em;
font-size: 10px;
pointer-events: none;
background: #fff;
}
.number-wrapper:after {
color: blue;
content: "\25B2";
margin-top: 1px;
}
.number-wrapper:before {
color: red;
content: "\25BC";
margin-bottom: 5px;
bottom: -.5em;
}
<span class='number-wrapper'>
<input type="number" />
</span>
A little different to the other answers, using a similar concept but divs instead of pseudoclasses:
input {
position: absolute;
left: 10px;
top: 10px;
width: 50px;
height: 20px;
padding: 0px;
font-size: 14pt;
border: solid 0.5px #000;
z-index: 1;
}
.spinner-button {
position: absolute;
cursor: default;
z-index: 2;
background-color: #ccc;
width: 14.5px;
text-align: center;
margin: 0px;
pointer-events: none;
height: 10px;
line-height: 10px;
}
#inc-button {
left: 46px;
top: 10.5px;
}
#dec-button {
left: 46px;
top: 20.5px;
}
<input type="number" value="0" min="0" max="100"/>
<div id="inc-button" class="spinner-button">+</div>
<div id="dec-button" class="spinner-button">-</div>
I've been struggling with this on mobile and tablet. My solution was to use absolute positioning on the spinners, so I'm just posting it in case it helps anyone else:
<html><head>
<style>
body {padding: 10px;margin: 10px}
input[type=number] {
/*for absolutely positioning spinners*/
position: relative;
padding: 5px;
padding-right: 25px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button !important;
width: 25px;
position: absolute;
top: 0;
right: 0;
height: 100%;
}
</style>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"/>
</head>
<body >
<input type="number" value="1" step="1" />
</body></html>
Crazy idea...
You could play around with some pseudo elements, and create up/down arrows of css content hex codes. The only challange will be to precise the positioning of the arrow, but it may work:
input[type="number"] {
height: 100px;
}
.number-wrapper {
position: relative;
}
.number-wrapper:hover:after {
content: "\25B2";
position: absolute;
color: blue;
left: 100%;
margin-left: -17px;
margin-top: 12%;
font-size: 11px;
}
.number-wrapper:hover:before {
content: "\25BC";
position: absolute;
color: blue;
left: 100%;
bottom: 0;
margin-left: -17px;
margin-bottom: -14%;
font-size: 11px;
}
<span class='number-wrapper'>
<input type="number" />
</span>
the above code for chrome is working fine. i have tried like this in mozila but its not working. i found the solution for that
For mozila
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
}
Thanks
Sanjib
The css to modify the spinner arrows is obtuse and unreliable cross-browser.
The most stable option I have found, is to absolutely position an image with pointer-events: none; on top of the spinners.
Untested in Edge but works in all other browsers.
Tested in Edge, this works to hide the arrows in Edge...
input[type=number]::-webkit-inner-spin-button, ::-webkit-outer-spin-button{
opacity: 0;
}
Related
I'm trying to get the behavior of <input type="search"> on regular <input type="text">.
I tried to use the appearance: searchfield; which didn't applied this special behavior.
How I want it to look:
CodePen Example (Tested on Chrome Browser, and it doesn't work)
Searching for a pure CSS/HTML solution
Demo: https://codepen.io/vsync/pen/MWjdbgL
Presented here three ways of solving the issue:
1️⃣ When the input element has no focus, its type is set to search, which then shows the x (clear button), and when the element has focus - its type is set to text
<input type="search"
onmouseup="this._timer=setTimeout(el=>{el.type='text'},0,this)"
onblur="clearTimeout(this._timer);this.type='search'"
/>
2️⃣ Wrap the input with a <form> element so it could be cleared using native <button type='clear'>
input{ padding:.5em; font:1em Arial;}
input[type='text']:placeholder-shown + button{ opacity:0; pointer-events:none;}
form{ display:inline-block; position: relative; }
form:hover input[type='text']:not(:placeholder-shown) + button{ opacity: 1 }
form button{
--size: 18px;
position: absolute;
border: none;
display: block;
width: var(--size);
height: var(--size);
line-height: var(--size);
font-size: calc(var(--size) - 3px);
border-radius: 50%;
top: 0;
bottom: 0;
right: calc(var(--size)/2);
margin: auto;
background-color: salmon;
color: white;
padding: 0;
outline: none;
cursor: pointer;
opacity: 0;
transition: .1s;
}
<form>
<input type='text' placeholder=' ' />
<button type='reset'>×</button>
</form>
3️⃣ Use a non-<form> wrapper and javascript
input{ padding:.5em; font:1em Arial; }
input[type='text']:placeholder-shown + button{ opacity:0; pointer-events:none;}
.inputWrap{ display:inline-block; position: relative; }
.inputWrap:hover input[type='text']:not(:placeholder-shown) + button{ opacity: 1 }
.inputWrap button{
--size: 18px;
position: absolute;
border: none;
display: block;
width: var(--size);
height: var(--size);
line-height: var(--size);
font-size: calc(var(--size) - 3px);
border-radius: 50%;
top: 0;
bottom: 0;
right: calc(var(--size)/2);
margin: auto;
background-color: salmon;
color: white;
padding: 0;
outline: none;
cursor: pointer;
opacity: 0;
transition: .1s;
}
<div class='inputWrap'>
<input type='text' placeholder=' ' />
<button type='reset' onclick='this.previousElementSibling.value=""'>×</button>
</div>
<html>
<head>
<style>
.border-0{
border: none;
}
.search-border{
border: 1px solid;
border-radius: 5px;
width: 200px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="search-border">
<input type="text" placeholder="Search" class="border-0">
<img src="/assets/close-icon-light.svg">
</div>
</body>
</html>
Hi,
Please try this code if this satisfies you. Use width of your choice for the search box. Also use a suitable close icon.
I want to customize the browser checkbox. When the status is checked, the icon checked.svg should be displayed instead of checkbox and the icon unchecked.svg otherwise.
Here is my code.
HTML:
<div class="checkbox-custom">
<input type="checkbox"/>
<div class="checkmark">
<img src="#/assets/images/icons/checkbox/unchecked.svg" class="unchecked"/>
<img src="#/assets/images/icons/checkbox/checked.svg" class="checked"/>
</div>
</div>
SASS:
.checkbox-custom {
position: absolute;
width: 28px;
height: 28px;
left: 0;
top: 0;
// Hide default browser checkbox
input[type=checkbox] {
display: none;
}
input[type=checkbox] + .checkmark {
position: absolute;
left: 3.5px;
top: 3.5px;
right: 3.5px;
bottom: 3.5px;
display: inline-block;
cursor: pointer;
img {
width: 21px;
height: 21px;
}
.checked {
display: none;
}
}
input[type=checkbox]:checked + .checkmark {
.checked {
display: block;
}
.unchecked {
display: none;
}
}
}
When i click on the checkbox, nothing happens. What could be the error?
This can be accomplished without any javascript. Clicking the label element toggles the checkbox inside of it, so with some clever css, we can change the display based on the input's checked state.
input[type=checkbox] {
display: none;
}
.label {
border: 1px solid #000;
display: inline-block;
padding: 3px;
/* background: url("unchecked.png") no-repeat left center; */
/* padding-left: 15px; */
}
input[type=checkbox]:checked + .label {
background: #f00;
color: #fff;
/* background-image: url("checked.png"); */
}
<label><input type="checkbox"><span class="label">Check me</span></label>
Change the .label styles to use background-image of your choice (and position it to the left of your text).
http://jsfiddle.net/pKM3x/
CSS:
.checkbox{
width: 23px;
height: 21px;
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}
.checked{
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}
HTML:
<div class="checkbox">
</div>
JQUERY:
$(".checkbox").click(function(){
$(this).toggleClass('checked')
});
This also possible to do with pure JS.
/* radio buttons */
.radio-container {
display: block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding-left: 1.5em;
margin-bottom: 0.75em;
}
.radio-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.radio-container input:checked .radio:after {
display: block;
}
.radio-container:hover .radio {
background: gray;
}
/* custom radio button */
.radio {
position: absolute;
top: 0;
left: 0;
height: 1em;
width: 1em;
background-color: transparent;
border: 1px solid gray;
border-radius: 50%;
}
.radio:after {
content: "";
position: absolute;
display: none;
top: 0;
left: 0;
width: 0.25em;
height: 0.25em;
border-radius: 50%;
background: white;
}
<form class="recharge">
<div>
<label class="radio-container" for="subscribe">
<input type="radio" id="one-time" name="recharge">
<span class="radio"></span>
Subscribe & Save 10%
</label>
</div>
<div>
<label class="radio-container" for="one-time">
<input type="radio" id="one-time" name="recharge">
<span class="radio"></span>
One Time Purchase
</label>
</div>
</form>
I have added custom styles to radio buttons on my website to give them a custom style. My HTML and CSS code is attached in the above snippet. However, now when I click on an input it does not select. I would ideally like to have this working without a JS component.
Please find the solution to your problem:
Codepen link to the solution
One of the issue I find was, you have not specified the color after the radio button is clicked and also the sibling selector was missing. I have added these lines specifically:
.radio-container input:checked ~ .radio {
background-color: #2196F3;
}
Hope it helps!! Thanks.
I am styling a checkbox to keep the user signed in, but I have ran into a problem that occurs within Firefox and IE. The checkbox looks like the following in all other browsers:
In other IE and Firefox, the checkbox looks like this:
My code is as follows:
<label id="checkbox">
<input type="checkbox" name="signinForm_keepSignedIn" id="signinForm_keepSignedIn" checked>
<span id="checkbox_span"></span>
</label>
<style>
#checkbox {
position: absolute;
left: 0px;
margin-left: 30px;
margin-top: 185px;
width: 110px;
height: 16px;
}
#signinForm_keepSignedIn {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
position: absolute;
border: none;
background-color: transparent;
}
#checkbox_span {
position: absolute;
width: 16px;
height: 16px;
display: block;
background: url("resources/images/elementBackgrounds/checkbox_unchecked.png");
cursor: pointer;
}
#signinForm_keepSignedIn:checked + #checkbox_span {
background: url("resources/images/elementBackgrounds/checkbox_checked.png");
}
</style>
If know that there is an issue with the initial "hidden" checkbox's appearance, but I don't know how to resolve the issue. What can I do to fix it?
You can add visibility: hidden property to checkbox input:
#checkbox input[type=checkbox] {
visibility: hidden;
}
I am trying to change the default 'box image' of the checkbox with CSS, but it is not working. Is there any way around this?
.class_checkbox{
background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;
}
<input type="checkbox" class="class_checkbox">
You can use pure css, just add a label to the checkbox like this:
.check_box {
display:none;
}
.check_box + label{
background:url('images/check-box.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
.check_box:checked + label{
background:url('images/check-box-checked.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
Example HTML:
.check_box {
display:none;
}
.check_box + label{
background:url('images/check-box.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
.check_box:checked + label{
background:url('images/check-box-checked.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
<input type="checkbox" class="check_box" id="checkbox1">
<label for="checkbox1">
Try:
<input type="checkbox" class="input_class_checkbox">
jQuery
$('.input_class_checkbox').each(function(){
$(this).hide().after('<div class="class_checkbox" />');
});
$('.class_checkbox').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});
Fiddle:
http://jsfiddle.net/cn6kn/
$('.input_class_checkbox').each(function(){
$(this).hide().after('<div class="class_checkbox" />');
});
$('.class_checkbox').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});
.class_checkbox {
width: 20px;
height: 20px;
background-color: red;
}
.class_checkbox.checked {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="input_class_checkbox">
I created a Fiddle using pure CSS.
The most voted answer doesn't handle click events and won't work well, because the checkbox value won't change.
This is my example:
http://jsfiddle.net/kEHGN/1/
Basically, we need the following html:
<div class="checkbox_wrapper">
<input type="checkbox" />
<label></label>
</div>
And the following CSS:
.checkbox_wrapper{
position: relative;
height: 16px;
width: 17px;
}
input[type="checkbox"] {
opacity:0;
height: 16px;
width: 17px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
input[type="checkbox"] + label{
background:url('../images/unchecked.png') no-repeat;
height: 16px;
width: 17px;
display:inline-block;
padding: 0 0 0 0px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
input[type="checkbox"]:checked + label{
background:url('../images/checked.png') no-repeat;
height: 16px;
width: 17px;
display:inline-block;
padding: 0 0 0 0px;
}
Just check the routes of the images, and the widths and heights should be equal to the width and height of the images.
On the fiddler I am using base64 encoded images.
I hope it can be useful.
I found another way, without using adjacent labels or surrounding divs.
My usecase was that I had a markdown parser that generates those nifty TODO lists and I wanted to style them. Changing the generated HTML wasn't a option, so I came up with this solution:
given a checkbox like this:
<input type="checkbox" id="cb">
You can style it with visibility: hidden on checkbox and visibility: visible on ::after, like this:
#cb {
visibility: hidden;
}
input#cb::after {
visibility: visible;
content: "F";
color: red;
background: green;
padding: 8px;
}
input#cb:checked::after {
content: " T ";
color: green;
background: red;
}
<!doctype html>
<html>
<body>
<input type="checkbox" id="cb">
</body>
</html>
EDIT:
#connexo in a comment pointed out that input elements cannot have content. It could be easly done using label element, for example like so (please someone correct me if this is wrong, I don't have non-webkit browser handy to test it).
#cb-span * {
visibility: hidden;
}
input#cb + label::after {
visibility: visible;
content: "F";
color: red;
background: green;
padding: 8px;
}
input#cb:checked + label::after {
content: " T ";
color: green;
background: red;
}
<!doctype html>
<html>
<body>
<span id="cb-span">
<input type="checkbox" id="cb">
<label for="cb"></label>
</span>
</body>
</html>
The checkbox works just like normal one and you can style it anyway you like.
Maybe it'll help someody (and I can bookmark it, because I haven't found anything like this on the web)
Maybe will be useful my sample with LESS.
<div class="custom-checkbox">
<input component="input" type="checkbox"/>
<label>Here is caption right to checkbox</label>
</div>
#imgsize: 25px;
.custom-checkbox{
position: relative;
> input[type="checkbox"] {
display:none;
position: absolute;
top: 0;
left: 0;
+ label{
background:url('../img/unchecked.png') no-repeat 0 0;
background-size:#imgsize;
height: #imgsize;
padding: 4px 0 5px 35px;
display: inline-block;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
}
> input[type="checkbox"]:checked + label{
background:url('../img/checked.png') no-repeat;
background-size:#imgsize #imgsize;
}
}