I'm styling some select inputs on a page, and it works fine on Windows Chrome. However, on Mac Chrome, the "native" implementation refuses to go away unless I apply -webkit-appearance: none; The problem with this, of course, is that I lose the down arrow that indicates it's a select element, which I would otherwise be able to add back in if inputs were allowed pseudo-elements (they're not).
Specifically, I'm trying to override the border-radius property, but no amount of border-radius: 0!important will override it.
Create or download a small down arrow and then give the following property to you select:
select{-webkit-appearance: none;
background:url(images/downarrow.png) no-repeat;
background-position: 98% 4px; }
Related
I have an input type field in my form, but in Firefox I am not able to remove the X icon (clear button) that appears when I have a date value set inside the input.
Moreover, I cannot change the font family in that input. It seems to be the Courier font family instead of the Arial font family, which is currently set as default in the whole website.
It is not possible to remove the clear button in FireFox. The ::ms-clear feature is only for Microsoft browsers, as described in the MDN documentation.
X or clear button
Even though the class referring to the clear button can be found through Shadow DOM inspection (i.e. .datetime-reset-button from datetimebox.css):
And direct changes in the inspector/devtools work (e.g. add display: none to the class), shadow root access and shadow elements manipulation/attachment is not allowed in <input> tags, leading to a "DOMException: Operation is not supported" if myInput.attachShadow({mode: 'open'}) is attempted (e.g. :host-context MDN example).
An alternative/workaround is to place an overlay image/background on the input's container through ::after:
#-moz-document url-prefix() { /* apply rules only to Firefox */
.my-datetime-input-container::after {
content: "";
position: absolute;
top: 42%;
right: 0.25rem;
background: url(/images/overlay.svg) white no-repeat;
/* or simply use background: white; */
background-size: 1rem;
width: 1rem;
height: 1rem;
}
}
This overlay prevents clicks/taps on the Shadow DOM clear button because it's literally covering it (needs an opaque background to completely hide it).
Font family issues
Changing the input's font, may be a specificity issue, attempting a more specific selector may be enough to apply the rule:
.my-datetime-input-container input[type="date"].my-specific-class {
font-family: inherit;
}
Where:
<div class="my-datetime-input-container">
<input type="date" class="my-specific-class" />
</div>
I think you could try this :
input[type=text]::-ms-clear {
display: none;
}
But the documentation warn about the ::-ms-clear CSS pseudo-element.
Non-standard This feature is non-standard and is not on a standards
track. Do not use it on production sites facing the Web: it will not
work for every user. There may also be large incompatibilities between
implementations and the behavior may change in the future.
Check this : https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3A-ms-clear
I'm having an issue with the select drop down button in twitter bootstrap. It's happening in the two browsers I have installed on the machine (IE11, Chrome) and it's not just restricted to 'my sites'.
Here is a screenshot of the bootstrap website (OS: Windows 8.1 Broswer: Chrome) (http://getbootstrap.com/css/#forms-controls):
I have checked the console window and all resources are loading correctly.
Could anyone help me with why this is happening / steps to resolve?
TL;DR: you can't use CSS to change the icon. You'll have to use a library that implements a select-like control using HTML and JavaScript (at the expense of mobile-friendly selects on iOS and Android).
The icon displayed in <select> is determined by the user's browser or operating system. You can't change it using CSS.
Select display in Chrome on a Mac:
Select display in Chrome on a Mac with some styles removed:
I removed line-height, background-color, border, border-radius, and box-shadow. Note that the arrow has changed even though I didn't change any related style.
Select display in Chrome on Windows:
Notice that the icons are different, even though the code is the same.
Now what?
Although select isn'g very styleable, there are many libraries that provide a very customizable implementation of a select-like control. I like to use Bootstrap-select.
This library creates a <div class="caret"></div> that can be styled to change the icon. For example after including the Bootstrap-select JavaScript, the following code:
HTML
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
CSS
.caret{
color: red;
}
Gives me this display:
You'll lose mobile display, though:
Using a custom library will disable the mobile-friendly way iOS and Android implement selects, so make sure a custom icon is important enough to you before proceeding.
I found a solution to this, add this CSS and put 'form-override' class on each select dropdown:
.form-override {
appearance: auto !important;
}
I'm not sure why this works or why it's needed, just wanted to share how I was able to fix this problem. For me it seems to be sporadic, sometimes the problem occurs and I need this style setting to fix it, and sometimes it does not need this fix.
Use for select
select {
-moz-appearance: none;
background: rgba(0, 0, 0, 0) url("../images/dropdown.png") no-repeat scroll 100% center / 20px 13px !important;
border: 1px solid #ccc;
overflow: hidden;
padding: 6px 20px 6px 6px !important;
width: auto;
}
You can't style the <select> element itself at this moment. Every browser applies its own styling to most form elements.
So you can create your own custom select by hiding the original one, create markup, e.g. div with ul + li and live it up with javascript.
OR
If you don't mind using jQuery, try these libraries:
SelectBoxIt
Select2
Chosen
Bootstrap select
jquery-selectBox
jQuery UI
I have experienced that behavior with IE on Windows 8.1. For some reason IE renders the arrow differently as soon as you start to style the select element (which bootstrap themes usually do). Even something as simple as setting the background color triggers this behavior.
The only solution I've found so far is to style the arrow as needed. You can use the ::-ms-expand pseudo element for that. The following css rule should restore the "default" look:
select::-ms-expand {
background-color: #fff;
border: none;
}
I have styled my select boxes, but i can still see the arrow in my select box in firefox, i have set css so:
background:transparent;
content:'';
apperiance:none;
Thats work on Chrome, but on Firefox i still see default arrow, is possible to delete it also on Firefox?
This should remove the arrow in selects in Chrome, Firefox, Safari, and IE10.
.poa-select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
text-indent: .01px;
text-overflow: "";
}
.poa-select::-ms-expand {
display: none;
}
Ideas taken from here and here.
Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!
If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.
Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
The trick that works for me is to make select width more than 100% and apply overflow:hidden
select {
overflow:hidden;
width: 120%;
}
The answer from here : How to remove the arrow from a tag in Firefox
Use the pointer-events property.
The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it. [see this post]
Here is a working FIDDLE using this method.
Also, in this SO answer I discussed this and another method in greater detail.
I am styling a drop down in Firefox on Mac OS X, but it is changing the arrow from the standard look to an ugly down arrow. What can I do to keep the standard form element with the nice up and down arrows, rather than the ugly down arrow? I figure that my custom styles are causing it, but I want to be able to identify what causes the browser to switch it.
Here are the styles I'm using...
select {
font: 400 16px/16px "Maven Pro";
margin: 2px 0;
text-transform: capitalize;
padding: 0;
height: auto;
}
That's not the CSS causing the difference. It's actually a browser difference. Form elements are something that you will have a very hard time standardizing across all browsers, except maybe submit buttons, which can be swapped out for images.
You can check around for some javascript plugins, but I wouldn't worry so much to get the safari select. Folks using Firefox / IE are already used to seeing this type of select.
I am currently migrating a site to HTML 5 and taking advantage of the new input types and attributes - using JavaScript as a fallback when a type or attribute is not implemented. My issue is that when the required message is triggered in FireFox the message is being cropped due to it overlapping the boundary of the containing div as below:
Demo: http://jsfiddle.net/f8b7D/2/
Is there a way to trigger the display of the message to shift to use the space available further left where it would not be cropped? I know that the message box cannot be selected using CSS and I would prefer not to rely on a JS solution as we have a number of users who have JavaScript disabled.
Additional Info:
In Chrome the default message for a select element overlaps the message bubble, although it is fully visible.
In Opera it displays correctly.
IE doesn't support the required attribute.
Fixed in Firefox 29 - apparently due to some dead code from 2002 that was removed once someone called their attention to it.
https://bugzilla.mozilla.org/show_bug.cgi?id=647813
I'm afraid that there is no way (and perhaps never will be a way) to style the message bubble for HTML5. I'm afraid that Javascript is your best bet. Here's some context.
HTML5 Required input styling
After some further playing around I found that the width of the message box is the same as the width of the select element. By setting the min-width of the select to the width of the message box (230px) the cropping can be prevented.
select{min-width: 230px;}
This solution is definitely a hack and should only be used if your site style will not be ruined by wide select elements. If you only have options with short text values e.g. Yes, No, Maybe then the required width of the select may look peculiar so only use this solution with care.
Unfortunately this does nothing about the appearance in Chrome.
I found a solution of sorts to this clipping of html5 form error messages. Its caused by a width being used in our css for a select element. If you increase the width the popup error message also increases in width. This also only seems to affect Firefox.
So I wrapped the 'select' in a span and gave that a position relative. I then gave the select a wider width (to accommodate the error message), but then also gave it a negative left margin. You'll need to play with your own px widths for your situation, but this solved the issue. I avoided having a default value for the first 'option' but I'm guessing you can use text-align right on the 'option' elements.
This solution then creates another issue! The red outline which Firefox uses for its invalid states will outline the entire 'hidden' area of the select which looks odd and different to other elements, so the answer was to simply turn off the borders, but I used css for the valid and invalid states to simply add a background icon (check/cross) to indicate when form fields were valid/invalid. I also used x:-moz-any-link in my css to filter these styles only for firefox and no other browsers. Heres my css...
/* start styles for Firefox clipping of validation msgs */
form fieldset > span, x:-moz-any-link {position: relative; }
form select, x:-moz-any-link {width: 230px; margin-left: -82px; }
form select option, x:-moz-any-link {width: 220px; margin-right: -20px; text-align: center; }
form input, form select, x:-moz-any-link {border: solid 1px transparent; box-shadow: none; }
form input:-moz-placeholder, form select:-moz-placeholder, x:-moz-any-link {box-shadow: none !important; }
form input:invalid, form select:invalid, x:-moz-any-link {box-shadow:0 0 3px transparent; }
/* end styles for Firefox clipping of validation msgs */
input:valid {background: #fff url("forms-check.png") no-repeat 130px center; }
input:focus:invalid {background: #fff url("forms-cancel.png") no-repeat 130px center; }
Its all a lot easier than I've made it sound?!
Hope its useful.