<span id = "referralValue">
<input type="number" name="value" value="0.00">
</span>
Hi all,
I currently have the following code. When you hover over the input box, there are 2 icons on the right hand of the box which you can toggle up and down to increase/decrease a value. I am unsure how to display the up and down buttons that increase/decrease values permenantly via CSS.
Any ideas.
You can achieve this using following CSS (in Chrome):
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
for more information click here
Target the spin buttons and set the Opacity to 1.
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
</style>
<span id = "referralValue">
<input type="number" name="value" value="0.00" min="" max="">
</span>
Set the min and max values according to your convenience.
If you really want to have the arrow up and down permanently, you will need to build your own solution for that using Javascript and CSS.
There is already something similiar called HTML5 Number polyfill.
If you are already using jQuery or can use it, you should have a look at that.
Related
I want to change the accent color of checkboxes, sliders, radio buttons and select components.
Is there any easy method for doing so?
You can use the new accent-color property if you are using Chrome version 93+.
#checkbox {
accent-color: limegreen;
}
<input type="checkbox" id="checkbox"/>
This works for checkboxes, sliders and radio buttons. There is currently no way to style the background of options of select components.
Browser support is still limited though. It will be supported in the next versions of Firefox and Edge too.
Using filter: hue-rotate for your inputs is useful
hue-rotate is counted in degrees that means that you can use 0-360deg
(This is supported in every browser)
Here's an example:
input {
filter: hue-rotate(320deg)
}
<input type="checkbox" checked><br>
<input type="radio" checked><br>
<input type="range">
I can't believe I haven't been able to find anything about this problem.
In my new project the future user will have a column with some input type="number", and as numeric fields (there is not a single textone) I want the numbers aligned to the right.
I found the numbers too close to the arrows so, logically, I added to them a padding-right.
To my surprise, It seems I can't separate a little the numbers from the arrows. padding-right moves the arrows along the numbers.
Basically only Opera do the padding the right way. but not the other main 3 browsers I have tested so far as you can see in the image below.
So. Is there any way to separate numbers from arrows so it works at least in Firefox and Chrome (as we recomend for our web app's these 2 browsers?)
a JSFIDDLE with a simple example
Rather than using padding-right use the following CSS
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { margin-left: 20px; }
and for Firefox above solution won't work, so the best solution is just to hide it :
input[type=number] {
-moz-appearance:textfield;
}
or you can try to "play" with some jquery plugin.
This is pretty annoying, in my case i solved the situation by passing the spinner to the left.
<input dir="rtl" type="number"/>
Left align the field in CSS
[type="number"] {
text-align: right;
direction: rtl;
}
<input type="number" min="0" max="9999" placeholder="Enter value ...">
As suggested by #Pedro Pam
Also old and I'm primarily leaving this one here for myself if this happens again. I ran into a similar problem and here's how I solved it. It presumes that you have a maximum for your number: if not, set a maximum high enough that users will never reach it.
<input type="number" min="1" max="999999" step="1" name="whatever-your-number-field-is" />
The key to solving this in my case was in the maximum value...more specifically, the number of characters/digits in the maximum value. Using the example above, we have 6 digits.
This came into play when I wrote my CSS rules. First, I used the webkit-outer-spin-button/webkit-inner-spin-button/Firefox rules above with a small twist...I used ems for my margin:
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { margin-left: 0.5em;}
input[type=number] {-moz-appearance:textfield;}
Then I defined my width using the number of digits above.
input[type='number'] {width: 6em; text-align: right;}
Now, because this is a number field, a user can "type over the boundary" and type a number such as 99999999. I used a jQuery keyup function to automatically lower the number to the max in these cases.
I'll put it together in the snippet below so you can see it.
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { margin-left: 0.5em;}
input[type=number] {-moz-appearance:textfield;}
input[type='number'] {width: 6em; text-align: right;}
<input type="number" min="1" max="999999" step="1" value="1" />
webshims.setOptions('forms-ext', {
replaceUI: 'auto',
types: 'number'
});
webshims.polyfill('forms forms-ext');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<div class="form-row">
<input type="number" value="1000" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="currency" id="c1" />
</div>
Webshim is a polyfill library that enables you to reliably use HTML5 features across browsers, even if native support is lacking.
JSFiddle demo
I know this is old, but I found a other "solution", after stumble over this.
a solution is with text-indent and calc:
[type="number"] {
text-indent: calc(100% - 20px);
}
I found this solution by check possible css properties for Input on:
https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls
Edit:
Sorry, that only work for fix defined number length as it's still left aligned.
A heavy JS solution with that property would be possible using the approach from this code Pen (calculate real text size):
https://codepen.io/Momciloo/pen/bpyMbB
I want to always show up/down arrows for input "number" field. Is this possible? So far I haven't had any luck...
http://jsfiddle.net/oneeezy/qunbnL6u/
HTML:
<input type="number" />
CSS:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: "Always Show Up/Down Arrows";
}
You can achieve this (in Chrome at least) by using the Opacity property:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
As stated above, this will likely only work in Chrome. So be careful using this code in the wild without a fallback for other browsers.
I tried this and it worked
input[type=number]::-webkit-inner-spin-button {
opacity: 1
}
</style>
<input type="number" value="1" min="1" max="999">
Found Here
If you're trying to get the same appearance across different browsers you may be forced to use a plugin/widget or build one yourself, the main browsers all seem to implement number spinners differently.
Try jQuery UI's spinner widget it offers a lot more versatility when it comes to styling.
Working Example
<p>
<label for="spinner">Select a value:</label>
<input id="spinner" name="value" />
</p>
$("#spinner").spinner();
I tried this and it's working
input[type=number]::-webkit-inner-spin-button {
opacity: 1
}
If you don't mind the focus on your input, do
document.getElementById(<id>).focus();
I am using an <input readonly="readonly">, styled as normal text to remove the appearance of an interactive field, but still display the value.
This is very useful to prevent a user from editing a field, while still being able to post the value. I realize this is a convenience method and that there are several workarounds, but I want to use this method.
Problem: The blinking caret still appears when the field is clicked/focused. (At least in FF and IE8 on Win7)
Ideally, I would like it to behave as it normally does, focusable, but without the blinking caret.
Javascript solutions welcome.
On mine there is no caret or so:
<input type="text" value="test" readonly="readonly" >
Take a look at this: http://www.cs.tut.fi/~jkorpela/forms/readonly.html
Sorry, now I understand your problem.
Try this:
<input type="text" value="test" onfocus="this.blur()" readonly="readonly" >
You can use this in your css, but it will not focus:
[readonly='readonly'] {
pointer-events: none;
}
You can remove the blinking caret by specify the css attribute into transparent
caret-color: transparent;
you can test the result here
It can be done using html and javascript
<input type="text" onfocus="this.blur()" readonly >
or jQuery
$(document).on('focus', 'input[readonly]', function () {
this.blur();
});
the only way i found for this was
//FIREFOX
$('INPUT_SELECTOR').focus(function () {
$(this).blur();
});
//INTERNET EXPLORER
$('INPUT_SELECTOR').attr('unselectable', 'on');
KENDO
$('.k-ff .k-combobox>span>.k-input').focus(function () {
$(this).blur();
});
$('.k-ie .k-combobox>span>.k-input').attr('unselectable', 'on');
The onfocus/blur method works ok to remove the cursor from a readonly field, but the browser does not automatically refocus on the next field, and you may lose focus altogether, which is not what the user usually expects. So, if this is required, you can use plain javascript to focus on the next field you want, but you have to specify the next field:
<input type="text" name="readonly-field" value="read-only"
readonly onfocus="this.form.NextField.focus()">
Where 'NextField' is the name of the field to goto. (Alternatively, you could provide some other means to locate the next field). Obviously, this is more involved if you want to navigate to some non-visible UI element, like a tab-panel, as you will need to arrange this as well.
Easy!
Just add disabled to input and it will not be clickable (focused)
I am wondering how to hide the text field portion of a standard html file upload tag
for example
<input type="file" name="somename" size="chars">
This generates obviously a text field and next to that field is a browse button... I want to hide the text field part but keep the button.
This will surely work i have used it in my projects.I hope this helps :)
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
I'd recommend hiding the whole thing and putting a separate button object which, when clicked, will end up clicking the input's browse button.
You can do this with CSS and javascript -- check out this article (actually the second time I've used this reference today).
The easiest way as not mentioned in any answer would be to use a label for the input.
<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>
input[type="file"] { display: none; }
Using label will be useful because clicking on the label is clicking on the input.
This will only work when input's id is equal to label's for attribute.
You can put an image as a background for the button.
That worked for me, a while ago.
The file input button is extremely difficult to style and manipulate, mainly for security reasons.
If you really need to customize your upload button, I recommend a Flash based uploader like SWFUpload or Uploadify that enables you to use a custom image as button, display a progress bar, and other things.
However, its basic philosophy differs from just embedding a control into a form. The uploading process takes place separately. Make sure you check out first whether this works for you.
DEMO
Pure css and html
The trick is to use a button above the input file button.
Plus, you should set
filter: alpha(opacity=0);
to the input file.
You could possibly hide the whole element and show a button or link instead. This is rather easy.
<input type="file" name="file" id="fileupload" style="width:200px; display:none;" onchange="submitmyform();" />
<input type="button" value="Select an Image" onclick="$('#fileupload').click();" />
The file upload element is hidden. The button will fire the click event and shows the file browser window. On selecting a file, the change event is fired and this can submit a form or call a script function, whatsoever.
Hope this helps...
input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px); } /* Hide input field */
#-moz-document url-prefix()
{
input[type="file"] { clip: rect(0, 265px, 22px, 125px); } /* Mozilla */
}
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */
This will do the same without JavaScript, but requires absolute positioning to use the clip property.
References
Custom Upload Button
CSS Wikibook: Clipping
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
It will display the file input field as a bootstrap button and will show selected file names beautifully. Additionally, you can set various restrictions using simple data-attributes or settings in js.
e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.
Try adding this css to your input
font-size: 0;
Hello I get inspired by #shiba and here is solution in Angular 9:
<input type="file" [id]="inputId" class="form-control" [style.display]="'none'"
[accept]="acceptedDocumentTypes" [multiple]="true" #fileInput
(change)="fileChange($event)" (blur)="onTouched()">
<input type="button" class="form-control" value="Browse..." (click)="fileInput.click()"/>
you can set it's content to empty string
like this :
<input type="file" name="somename" size="chars" class="mycustominput">
and in your css file :
.mycustominput:after{
content:""!important;
}
You can hide the text behind the button changing the buttons width to 100% using the webkit-class. The button will then overlap the <span> behind itself on the shadow-root.
There is no need to apply any opacity, transparency or hidden attribute to the button, it's just a bit different to style compared to other objects and this will keep the localisation of the form element alive.
This will do the trick and is supported (MDN):
input[type=file]::-ms-browse { /* legacy edge */
width: 100%;
}
input[type=file]::file-selector-button { /* standard */
width: 100%;
}
input[type=file]::-webkit-file-upload-button { /* webkit */
width: 100%;
}