This question already has answers here:
HTML slider with two inputs possible?
(10 answers)
Closed 3 years ago.
I have a range slider that display the one value, but i wish to display 2 limits i.e min and max, something like a price range slider and then save the min and max value in database, but currently i have only one value.
There are various sliders made through js, but i am wondering can this code be modified to have both max and min values on a single slider (#fiddle)
<body>
<form>
<input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" />
<input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" />
</form>
</body>
You could create a widget yourself.
Broad idea:
Markup and Javscript:
Have two range inputs inside a container for the widget
Use data attributes on the container to hold the two values e.g. data-lbound for storing the lower value and data-ubound to store the higher value
Update the data attributes of the container on input event of the range inputs
Use these data attributes to retrieve the values any time required for form submission or any other use
CSS:
Use absolute positioning to position the two range inputs on top of each other inside the container
Stylize the range inputs to have their thumbs moved a little above so that overlapped range inputs do not prevent their usage
If required, hide the slider/bar/track
Create an ::after pseudo-element on the container with its content property set to the data attributes of the container. This will be used to display the current ranges.
Rest is all about beautifying the ranges inputs.
Here is a small demo that I created. (Test it out with Chrome or Firefox) Works with keyboard as well.
Fiddle: http://jsfiddle.net/abhitalks/a1f1k8d0/2/
Snippet:
.multi-range, .multi-range * { box-sizing: border-box; padding: 0; margin: 0; }
.multi-range {
position: relative; width: 160px; height: 28px; margin: 16px;
border: 1px solid #ddd; font-family: monospace;
}
.multi-range > hr { position: absolute; width: 100%; top: 50%; }
.multi-range > input[type=range] {
width: calc(100% - 16px);
position: absolute; bottom: 6px; left: 0;
}
.multi-range > input[type=range]:last-of-type { margin-left: 16px; }
.multi-range > input[type=range]::-webkit-slider-thumb { transform: translateY(-18px); }
.multi-range > input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; height: 0px; }
.multi-range > input[type=range]::-moz-range-thumb { transform: translateY(-18px); }
.multi-range > input[type=range]::-moz-range-track { -webkit-appearance: none; height: 0px; }
.multi-range > input[type=range]::-ms-thumb { transform: translateY(-18px); }
.multi-range > input[type=range]::-ms-track { -webkit-appearance: none; height: 0px; }
.multi-range::after {
content: attr(data-lbound) ' - ' attr(data-ubound);
position: absolute; top: 0; left: 100%; white-space: nowrap;
display: block; padding: 0px 4px; margin: -1px 2px;
height: 26px; width: auto; border: 1px solid #ddd;
font-size: 13px; line-height: 26px;
}
<div class='multi-range' data-lbound='10' data-ubound='50'>
<hr />
<input type='range'
min='10' max='45' step='5' value='10'
oninput='this.parentNode.dataset.lbound=this.value;'
/>
<input type='range'
min='15' max='50' step='5' value='50'
oninput='this.parentNode.dataset.ubound=this.value;'
/>
</div>
Note: The above demo is well, just a demo. It will work perfectly in Chrome and Firefox, but I could not test it in IE/Edge. My feeling is that it will have problems with IE/Edge because the slider thumbs are inline with the track in those browsers. You can further customize and stylize it to work with IE/Edge.
Related
I have some checkboxes in a grid and want to use vanilla-css and html to make a custom checkbox. That works fine. The problem is the remaining box of the original checkbox, that stays in my grid and makes it behave in strange ways as it takes a cell. Even when I make it transparent or deactivate it, as it is often suggested.
In the original example they moved it out of the screen area, but I can make it escape the grid.
I think this is the part where it fails to behave like I want to:
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
Here is a minimal example: https://jsfiddle.net/3mzsLj1v/14/
Here is the example I used: https://css-tricks.com/the-checkbox-hack/
Here is the real code I work on: https://codepen.io/vaeng/pen/XWXKoMb
Thanks for your help. I am sure this is very common, but being a beginner, I might not use css in the correct way?
In both your "minimal" and "real code" examples, your "New Checkboxes" comments are not properly opened.
In minimal example:
Line 23: *New Checkboxes*/ s/b /*New Checkboxes*/
In real code example:
Line 123: * New Checkboxes and radio buttons*/ s/b /* New Checkboxes and radio buttons*/
If you fix these lines, your code should work as intended.
Also, I noticed in line 102 that you put // before visibility: hidden;. If you want to comment this line, this syntax is not valid in CSS.
You see, your label and input element are on the same level, and even with position: absolute; your input still a part of the grid. Replaced your input inside the label, added span element and rewrited CSS.
Although in your code was
* New Checkboxes*/
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
The first comment was closed incorrect, so next statement didn't work.
.body {
height: 100%;
}
.outer-box {
display: grid;
margin: auto;
background-color: green;
width: 300px;
align-self: center;
grid-gap: 10px;
}
.inner-box {
display: grid;
width: 80%;
background-color: red;
align-self: center;
margin: 5px 5px 5px 5px;
}
/* New Checkboxes*/
/* Base for label styling */
[type="checkbox"] {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked)+span,
[type="checkbox"]:checked+span {
position: relative;
padding-left: 1.95em;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked)+span:before,
[type="checkbox"]:checked+span:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1em;
height: 1em;
border: 1px solid grey;
background: transparent;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked)+span:after,
[type="checkbox"]:checked+span:after {
content: '\2713\0020';
position: absolute;
top: .05em;
left: .2em;
font-size: 1.3em;
line-height: 0.8;
color: whitesmoke;
transition: all .2s;
font-family: Arial;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked)+span:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked+span:after {
opacity: 1;
transform: scale(1);
}
<div class="outer-box">
<div class="inner-box">
Some text
</div>
<div class="inner-box">
<label for="box1" class="container">
<input type="checkbox" id="box1"><span>Selectbox1</span>
</label>
<label for="box2" class="container">
<input type="checkbox" id="box2"><span>Selectbox2</span>
</label>
</div>
</div>
And please, don't use display: grid; for every element. It's very specific setting only for cases, when you really need you use grid.
I am new to css/html and want to know the css style for the input control of type number. I am getting the default style(two arrows one in one column) with the following code.
<input type="number" placeholder="0">
Default Style:
But i want the css style for the image given below(Highlighted with red circle).
I know with the similar question asked previously
Customize appearance of up/down arrows in HTML number inputs
here it gives the following spin control which i don't want.
My requirement is very specific to the 2nd image which i have attached.
Yes, you can (webkit only I assume):
<style>
input[type=number] {
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0 8px;
}
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]:hover::-webkit-inner-spin-button {
background: #eee url('http://i.stack.imgur.com/YYySO.png') no-repeat 50% 50%;
width: 14px;
height: 14px;
padding: 4px;
position: relative;
right: 4px;
border-radius: 28px;
}
</style>
<input type="number" value="0">
See JSFiddle method 1
See JSFiddle method 2
Reference
I have this input type:
input[type=number] {
width:9vw;
height:10vw;
max-width:42px;
max-height:52px;
text-align: center;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius:1px;
text-align:center;
border:3px solid black;
display:inline-block;
margin-left:6%;
background-color:black;
color:white;
}
<input type="number" MIN="0" MAX="15" default="2" >
I noticed that the display changes with different browsers. I I would set the arrows always visible and which cover the entire height. I would only white arrows on a black background. I need also to set default value to 2. thanks for your help
As durbnpoisn said, you can simply set a value attribute to fix your default value problem.
Since you gave your input field a type, you're referencing to the HTML5 input field, which automatically includes those arrows. To get some custom arrows, you have to play around with -webkit-appearance: none;. In order to do so, I've found 2 simple explanations to achieve this here and here.
Combined together this would look somehow like this:
<input type="number" value="2">
input[type=number] {
width: 9vw;
height: 10vw;
max-width: 42px;
max-height: 52px;
text-align: center;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
text-align: center;
border: 3px solid black;
display: inline-block;
margin-left: 6%;
background-color: black;
color: white;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
background: #eee url('http://i.stack.imgur.com/YYySO.png') no-repeat 50% 50%;
width: 14px;
height: 14px;
padding: 4px;
position: relative;
right: 4px;
border-radius: 28px;
}
You can also check this in a little fiddle.
You don't use default. You use value:
<input type="number" MIN="0" MAX="15" value="2" >
Your min and max will be ignored. That should be handled with Javascript.
That is not true. It actually works fine. Plus, it even auto-filters bad values.
As far as the looking different part... You have a condition in your style to allow for different browsers. That may or may not be overridden at render time.
This question already has answers here:
How to customize <input type="file">?
(18 answers)
Closed 6 years ago.
I'm trying to style a file upload button to my personal preferences, but I couldn't find any really solid ways to do this without JS. I did find two other questions about this subject, but the answers there either involved JavaScript, or suggested Quirksmode's approach.
My major issue with this Quirksmode's approach is that the file button will still have the browser-defined dimensions, so it won't automatically adjust to whatever's used as button that's placed below it. I've made some code, based on it, but it will just take up the space the file button would normally take up, so it won't at all fill the parent div like I want it to.
HTML:
<div class="myLabel">
<input type="file"/>
<span>My Label</span>
</div>
CSS:
.myLabel {
position: relative;
}
.myLabel input {
position: absolute;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
}
This fiddle demonstrates how this approach is quite flawed. In Chrome, clicking the !! below the second demo button will open the file dialog anyway, but also in all other browsers, the file button doesn't take up the correct areas of the button.
Is there any more solid way to style the file upload button, without any JavaScript, and preferably using as little 'hacky' coding as possible (since hacking usually brings other problems along with it, such as the ones in the fiddle)?
I'm posting this because (to my surprise) there was no other place I could find that recommended this.
There's a really easy way to do this, without restricting you to browser-defined input dimensions. Just use the <label> tag around a hidden file upload button. This allows for even more freedom in styling than the styling allowed via webkit's built-in styling[1].
The label tag was made for the exact purpose of directing any click events on it to the child inputs[2], so using that, you won't require any JavaScript to direct the click event to the input button for you anymore. You'd to use something like the following:
label.myLabel input[type="file"] {
position:absolute;
top: -1000px;
}
/***** Example custom styling *****/
.myLabel {
border: 2px solid #AAA;
border-radius: 4px;
padding: 2px 5px;
margin: 2px;
background: #DDD;
display: inline-block;
}
.myLabel:hover {
background: #CCC;
}
.myLabel:active {
background: #CCF;
}
.myLabel :invalid + span {
color: #A44;
}
.myLabel :valid + span {
color: #4A4;
}
<label class="myLabel">
<input type="file" required/>
<span>My Label</span>
</label>
I've used a fixed position to hide the input, to make it work even in ancient versions of Internet Explorer (emulated IE8- refused to work on a visibility:hidden or display:none file-input). I've tested in emulated IE7 and up, and it worked perfectly.
You can't use <button>s inside <label> tags unfortunately, so you'll have to define the styles for the buttons yourself. To me, this is the only downside to this approach.
If the for attribute is defined, its value is used to trigger the input with the same id as the for attribute on the <label>.
Please find below a way that works on all browsers. Basically I put the input on top the image.
I make it huge using font-size so the user is always clicking the upload button.
.myFile {
position: relative;
overflow: hidden;
float: left;
clear: left;
}
.myFile input[type="file"] {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 100px;
filter: alpha(opacity=0);
cursor: pointer;
}
<label class="myFile">
<img src="http://wscont1.apps.microsoft.com/winstore/1x/c37a9d99-6698-4339-acf3-c01daa75fb65/Icon.13385.png" alt="" />
<input type="file" />
</label>
The best example is this one, No hiding, No jQuery, It's completely pure CSS
http://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
<input type="file" class="custom-file-input">
This seems to take care of business pretty well. A fidde is here:
HTML
<label for="upload-file">A proper input label</label>
<div class="upload-button">
<div class="upload-cover">
Upload text or whatevers
</div>
<!-- this is later in the source so it'll be "on top" -->
<input name="upload-file" type="file" />
</div> <!-- .upload-button -->
CSS
/* first things first - get your box-model straight*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
label {
/* just positioning */
float: left;
margin-bottom: .5em;
}
.upload-button {
/* key */
position: relative;
overflow: hidden;
/* just positioning */
float: left;
clear: left;
}
.upload-cover {
/* basically just style this however you want - the overlaying file upload should spread out and fill whatever you turn this into */
background-color: gray;
text-align: center;
padding: .5em 1em;
border-radius: 2em;
border: 5px solid rgba(0,0,0,.1);
cursor: pointer;
}
.upload-button input[type="file"] {
display: block;
position: absolute;
top: 0; left: 0;
margin-left: -75px; /* gets that button with no-pointer-cursor off to the left and out of the way */
width: 200%; /* over compensates for the above - I would use calc or sass math if not here*/
height: 100%;
opacity: .2; /* left this here so you could see. Make it 0 */
cursor: pointer;
border: 1px solid red;
}
.upload-button:hover .upload-cover {
background-color: #f06;
}
Any easy way to cover ALL file inputs is to just style your input[type=button] and drop this in globally to turn file inputs into buttons:
$(document).ready(function() {
$("input[type=file]").each(function () {
var thisInput$ = $(this);
var newElement = $("<input type='button' value='Choose File' />");
newElement.click(function() {
thisInput$.click();
});
thisInput$.after(newElement);
thisInput$.hide();
});
});
Here's some sample button CSS that I got from http://cssdeck.com/labs/beautiful-flat-buttons:
input[type=button] {
position: relative;
vertical-align: top;
width: 100%;
height: 60px;
padding: 0;
font-size: 22px;
color:white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #454545;
border: 0;
border-bottom: 2px solid #2f2e2e;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #2f2e2e;
box-shadow: inset 0 -2px #2f2e2e;
}
input[type=button]:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
I just came across this problem and have written a solution for those of you who are using Angular. You can write a custom directive composed of a container, a button, and an input element with type file. With CSS you then place the input over the custom button but with opacity 0. You set the containers height and width to exactly the offset width and height of the button and the input's height and width to 100% of the container.
the directive
angular.module('myCoolApp')
.directive('fileButton', function () {
return {
templateUrl: 'components/directives/fileButton/fileButton.html',
restrict: 'E',
link: function (scope, element, attributes) {
var container = angular.element('.file-upload-container');
var button = angular.element('.file-upload-button');
container.css({
position: 'relative',
overflow: 'hidden',
width: button.offsetWidth,
height: button.offsetHeight
})
}
};
});
a jade template if you are using jade
div(class="file-upload-container")
button(class="file-upload-button") +
input#file-upload(class="file-upload-input", type='file', onchange="doSomethingWhenFileIsSelected()")
the same template in html if you are using html
<div class="file-upload-container">
<button class="file-upload-button"></button>
<input class="file-upload-input" id="file-upload" type="file" onchange="doSomethingWhenFileIsSelected()" />
</div>
the css
.file-upload-button {
margin-top: 40px;
padding: 30px;
border: 1px solid black;
height: 100px;
width: 100px;
background: transparent;
font-size: 66px;
padding-top: 0px;
border-radius: 5px;
border: 2px solid rgb(255, 228, 0);
color: rgb(255, 228, 0);
}
.file-upload-input {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
It's also easy to style the label if you are working with Bootstrap and LESS:
label {
.btn();
.btn-primary();
> input[type="file"] {
display: none;
}
}
I have an input box
<span class="arrowDate"><input type="text" value="<?php echo $inputValue; ?>" id="<?php echo $id; ?>" class="datePickBox" /></span>
What I want to achieve is to add via css and image with and arrow in the right hand corner of the input box. If I change properties to the image, the properties of the input box should remain the same. Basically the image should be a type of overlay for the input box, but do not know how to do this.
.datePickBox{
font-size: 0.9em;
border: 1px solid #DEDEDE;
width: 270px;
position:relative;
right:0px !important;
padding-right:20px;
}
.arrowDate{ background:url('../images/arrow.png') no-repeat right center; border:1px solid #DEDEDE; }
Give your <input> a transparent background so the background of the <span> can shine thru and remove the border, because the border comes from the <span> in your case;
.datePickBox {
background: none;
border: none;
}
But your text will be over the background image, if long enough, so you can additionaly add a right padding as large as the image is wide.
.datePickBox {
background: none;
border: none;
padding-right: 20px; /* bg image width */
}
Given the mark-up:
<span><input type="text" id="textInput" name="textInput" />→</span>
I used the CSS:
span {
display: block;
width: 150px;
height: 30px;
position: relative;
background-color: #ffa;
text-align: right;
overflow: hidden;
border-radius: 1em;
border: 1px solid #ccc;
line-height: 30px;
padding: 0 0.5em 0 0;
}
span > input {
position: absolute;
top: 0;
left: 0;
right: 2em;
bottom: 0;
background-color: transparent;
border-radius: 1em 0 0 1em;
border-width: 0;
border-right: none;
outline: none;
}
To give the following JS Fiddle demo.
It's worth noting that I explicitly chose to place the arrow alongside the input, instead of 'overlaying' it above the input. It's also possible to amend my answer from the a similar question to create a comparable layout with a submit button alongside the input.
Can't get the image to display within the input box, with overlay I mean floating above the input box
you won't be able to get it floating above the text with background-image.
One way to do this would be to place the image next to the input field, and using relative positioning to move it above it.
CSS:
.boximage { position: relative; left: -40px; z-index: 2 }
HTML:
<input type='text'><img class='boximage' src='image.gif'>
better use this
<span><input type='text' /><img src='datepicker.jpg' /></span>
change the css to meet your overlay.. remove the right border of the text box