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
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.
i have this search bar in my application which i want to modify:
Right now the "X"-Icon is visible from the beginning even tho it does nothing before an input was done, so i want to make it appear AFTER the user starts entering text.
The icon is a SVG i added and styled seperatly.
I don't realy know how i can do this, i thought its easy and i can just use something like "::after" but it seems that this it not possible with input fields.
Ps.: im an absolute beginner in CSS so please have mercy.
Best way to achieve your requirement would be to have different classes which shows/hides the icon by checking when input is not empty in JS.
If you want to achieve without using JS you can target the adjacent button element when the input is focussed and add ::before pseudo element and style it.
input:focus+button:before {
content: "X";
position: absolute;
left: 0;
color: red;
}
It's not possible with CSS. You would have to use Javascript.
Javascript
// set the id of the x button to x-button
// set the id of the input field to input
var x_button = document.getElementById("x-button");
var input = document.getElementById("search-input");
input.oninput = function(){
if(this.value) x_button.classList.add("visible");
else x_button.classList.remove("visible");
}
CSS
.x-button { display:none;}
.visible {display:block;}
it is possible if you wanna do it using only css.
#Search{
font-size:22px;
color:green;
background-image:url('images/search.jpg');
background-repeat:no-repeat;
background-position:center;outline:0;
}
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
}
<input id="Search" name="Search" type="search" placeholder="Search" />
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 have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.
Is there a way that I can select a textarea such that $('#id_of_textarea').val() in jQuery will be ''? I tried using :empty. I saw that CSS provides a way to select empty inputs because the text is in the value attribute ([value=""]). Is there an attribute for the text in a textarea?
I'm looking for a selector that will work with CSS, not just jQuery.
Best solution I can think of is a CSS 3 workaround. Set the field to required (and unset it on submit if need be). Then you can use
textarea:invalid { /* style here... probably want to remove box-shadow and such */ }
this works in recent browsers except edge (at the moment):
textarea:placeholder-shown {
/* this should be active only when area is empty and placeholder shown */
}
so with jQuery for example you can pick all empty textareas:
$('textarea:placeholder-shown').val()
https://developer.mozilla.org/en/docs/Web/CSS/:placeholder-shown
If you're using React, then this is the solution:
textarea:not(:empty) {
// Apply css here
}
For instance,
/* Apply style when textarea contains text */
textarea:not(:empty) {
border: 6px solid blue;
padding: 6px;
}
Working demo:
Textarea - Select empty textarea using CSS
Note: While this works perfectly in React (because of re-painting caused by state update), It does not provide the same response if implemented using Vanilla HTML + CSS.
This works fine, as with input:
<textarea name="comment" id="comment" class="authority_body-input" data-val="{$form.comment}" onkeyup="this.setAttribute('data-val', this.value);">
textarea.authority_body-input:not([data-val=""]):not(:focus) {
color: red;
}
You can use the :empty css pseudo-class.
See an example in jsfiddle.
In the example there is a button for dynamically add new empty textareas to the DOM, so you can see that the new elements also are affected with the pseudo-class.
The code in the example was tested in Firefox 5.0, Opera 11.50 and Chromium 12.
Also, you can see a good description for the :empty pseudo-class here.
For those who are using AngularJS, you can use ng-class in your view to add a class to your textarea to know if it is empty or not.
HTML :
<textarea ng-model="myForm.myTextArea"
ng-class="(myForm.myTextArea.length)?'not_empty':'empty'">
</textarea>
CSS :
textarea.empty {
background-color:red;
}
textarea.not_empty {
background-color:blue;
}
Here is a jsfiddle.