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();
Related
I'm having multiple forms in an expansion, and I was using this code, for a date picker,
<mat-form-field>
<input formControlName="date" matInput placeholder="Dátum" type="date">
</mat-form-field>
Which works totaly fine, the expansion doesn't hide it (have a look), but then I had start and end values for both date and time, so I switched to ngx material daterangepicker.
My only problem is that the expansion hides the daterangepicker (have a look), so the daterangepickers code looks like this:
<mat-form-field>
<input
matInput
ngxDaterangepickerMd
name="daterange"
placeholder="Choose date"
applyLabel="Okay"
startKey="start"
endKey="end"
firstMonthDayClass="first-day"
lastMonthDayClass="last-day"
emptyWeekRowClass="empty-week"
lastDayOfPreviousMonthClass="last-previous-day"
firstDayOfNextMonthClass="first-next-day"
[autoApply]="options.autoApply"
[linkedCalendars]="options.linkedCalendars"
[singleDatePicker]="options.singleDatePicker"
[showDropdowns]="true"
formControlName="date"
[showWeekNumbers]="options.showWeekNumbers"
[showCancel]="options.showCancel"
[showClearButton]="options.showClearButton"
[showISOWeekNumbers]="options.showISOWeekNumbers"
[customRangeDirection]="options.customRangeDirection"
[lockStartDate]="options.lockStartDate"
[closeOnAutoApply]="options.closeOnAutoApply"
[opens]="opens"
[drops]="drops"
[timePicker]="timePicker"
/>
</mat-form-field>
I have tried to give it a custom z-index, like:
.md-drppicker {
z-index: 9999;
}
ngx-daterangepicker-material {
z-index: 9999;
}
But that didnt solve the problem, tried messing with the display/position too, but I can't fix it.
Any idea what's wrong?
Edit: Here's a better picture for the daterange picker problem
You need to use the overflow attribute as there is no space for the calendar. I think it will resolve your issue.
.md-drppicker {
z-index: 9999;
overflow: auto; // also try overflow-y;
}
ngx-daterangepicker-material {
z-index: 9999;
overflow: auto; // also try overflow-y;
}
I would suggest you to attach a stackblitz instance if issue still persist.
I'm using version the ngx-daterangepicker-material 2.4.1 on Angular 6.1.10
The issue for us was with the use of MatInput and angular-split-ng6.
The css fix for our implementation was the following
.md-drppicker.drops-down-right.ltr.shown.double.show-ranges {
position: fixed;
}
After using the above our calendar rendered correctly over the neighboring layer and did not wrap the calendar when the area where it was launched from is smaller than the required width for displaying the calendars side by side.
Chrome has apparently added a dropdown arrow to text inputs that reference a <datalist>. It's appearing in Chrome 34 (Canary) but not in the current stable build (Chrome 31).
It appears only when the text field is focused (see update) and is applied to both input types text and search.
It could be worse as far as native browser implementations go, but as you can see in the image, it conflicts with my design specs.
Does anyone know how to remove or replace this new feature?
<datalist id="list"><option value="foo"><option value="bar"></datalist>
<input type="text" list="list" name="field" maxlength="50" autocomplete="off" spellcheck="off" placeholder="Jump To">
Update:
The arrow also appears when the field is hovered (not just focused) and unfortunately also has its own background color when the button itself is hovered:
Thanks to the comment by alexander farkas, here is the style rule to remove the arrow:
input::-webkit-calendar-picker-indicator {
display: none;
}
As others have mentioned ::-webkit-calendar-picker-indicator { display: none } works at removing the arrow it would also impact the html5 datepicker on a <input type="date">,
To remove just removing the datalist input would be:
[list]::-webkit-calendar-picker-indicator {
display: none;
}
Thanks to Cantera. I didn't want to get rid of the black arrow entirely, just the gray square surrounding it.
input::-webkit-calendar-picker-indicator {
background-color: inherit;
}
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
Also removed the arrow for me and I found created a better clicking experience to still click where the arrow would be, you can even increase the the width and height of it > 1em and in the input maybe put a custom arrow as a background image, where the arrow would be.
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
It's work for me; (use display:0 not work on chorme)
datalist::-webkit-calendar-picker-indicator {
display: none;
opacity: 0;
}
It is okay but this css code will hide any calander on page.
Like I'm using datepicker calender and this will also hide the controls including datalist and datetime picker.
Set the list option of parent input to be empty, <input list="" ... /> , eg :
<input
list=""
name="option"
id="input"
autocomplete="off"
>
<datalist id="datalist">
<option>Carrots</option>
<option>Peas</option>
<option>Beans</option>
</datalist>
see mdn customizing_datalist_styles example
try -webkit-appearance: none that should remove the default styles
I'm developing an app over PhoneGap for an iPhone using jQuery Mobile. When I press (and keep) a button I have this menu (see image below):
http://imageshack.us/photo/my-images/855/imagexj.png/
How can I disable it?
Thanks in advance,
DGM.-
just add the following css code to disable:
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
and only enable something you like:
input {
-webkit-user-select: auto;
}
Try this:
$('#openBtn').click(function(){
$(this).button('disable');
});
It looks like you can also add the class ui-disabled to a button. You can also simply add the attribute disabled to a button or input tag. Note that this will not work on an <a> tag that uses the data-role="button". For some reason it only works on <button disabled></button> and <input type="text" disabled />
I have an input button with a style, I want to alter the style if it is disabled. This works when disabled is set like so disabled="disabled" but if disabled is set simply by writing disabled it doesn't work with the class specifier as well, am I constructing the CSS wrong?
So to clarify input[disabled="disabled"].awesome works properly, input.awesome.disabled does not.
I am testing with the following HTML:
<input class="awesome" disabled />
<input class="awesome" disabled="disabled" />
CSS:
input[disabled="disabled"].awesome , input.awesome.disabled
{
color: #aaa;;
background-color: #eee;
}
If I write the selector like so, it works (but for all buttons)
input[disabled="disabled"], input.disabled { /**/ }
Disabled is not a class (which is what your CSS implies), it's a pseudoclass. Use this:
input.awesome:disabled
I would like to apply a special style to all inputs in my form that are required and empty at that.
It does work when i write in my css
input[required='required'] {
bla-bla-bla;
}
but it doesn't work, when i write
input[value=''] {
bla-bla-bla;
}
I know i can do that using jQuery, but i would like to do that in pure css, if it is possible.
Can that be done?
Thank you in advance,
Timofey.
If you don't have to support older IE versions, you can set the placeholder attribute on your input to something (can be whitespace, but must be something) and use :placeholder-shown to target that input.
<input type="text" class="custom-input" placeholder=" ">
.custom-input:placeholder-shown {
/* Your rules */
}
You can use the Pseudo-Selecot :invalid for this - it will match an input only when the browser-validation fails for the element. If you set the element required it will be invalid as long as it is empty.
And all moder browsers support this CSS-class: Browser Compatibility
input:invalid {
border-color: red;
}
<input type="text" required>
Searched css style empty inputs and found the following:
Matching an empty input box using CSS
You need to use JavaScript.
To use the CSS style, you would have to type in the attribute: value='' in your HTML, but then the CSS would match regardless of if the value changes mid-session.
Try this
<input type="text" value="">
input:not([value=""]) {
/* Your code */
}