Basically, I want to be able to just show the drop-down arrow and not the text-box associated to that drop-down arrow. I don't want to display the value, but the javascript onchange event will still fire if someone changes the selection.
Idea's?
Paul
Solution for Chrome only
(maybe webkit in general, but I can't test that)
I tried it in old IE7/8, doesn't work because it cuts off the dropdown to the set width as well.
Firefox doesn't show the arrow and instead cuts the text off since it left-aligns.
Solution is as follows:
Should be pretty easy to just set the width of the control via CSS and limit it to the arrow. Simple example I built for Chrome (doesn't really work in other browsers):
<select style="width:18px">
<option value="10000">Something</option>
<option value="100">Other thing</option>
<option value="1">The last option</option>
</select>
Example fiddle: http://jsfiddle.net/Fs7G5/
<select><option></select>
It does not make much sense, but it answers the question asked.
You will not find a cross-browser solution. You probably will want to set all appearances across all browsers to none, and then build a custom-styled select/option that works to meet your requirements. The JS onchange event will still fire properly even if it has a custom style.
You can read up on appearance at the MDN, but note that it isn't supported fully. An example you can utilize for the time being:
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
You will need to adjust properties such as border, border-radius, and background-color if you try to style your own solution.
Related
I've got an ng-options multiselect list that I'm trying to append some icons before the option text with a ::before class. This works great in chrome but not Firefox. The content on the ::before seems to wipe out the option text.
.optionClass:before{
content:"::before "
}
<select multiple="multiple">
<option class="optionClass">first</option>
<option class="optionClass" label="sec" >second</option>
</select>
I'm expecting to see both "first" and "second", but in FF I can only see first. The text for "second" is hidden.
Once again, this works perfectly in Chrome, but not in Firefox.
Is there a way around this issue with just css? If not, is there a way I can leave the label elements off the options when using ng-options with AngularJs 1.x?
I found a tenuous workaround for this issue.
I created a FF bug report for this issue. One of the dev's said "This is kind of expected" but then he referenced using attr(label) appended to the content. This doesnt work for a number of reasons in the :before content (in my case because I'm display FA icons in that field) so I appended it to the :after
https://bugzilla.mozilla.org/show_bug.cgi?id=1644611
The workaround is to create a css Firefox selector and then append the label to the
:after content field using attr(label) Hopefully this doesnt result in any false positives that would display the label twice. In the limited cases I've tested so far it seems to be holding up.
#-moz-document url-prefix(){
.optionClass:after{
content: attr(label);
}
}
How can I remove the small square arround the radio button that gets displayed when the input gets focused?
I'm pretty sure this is a duplicate, but I don't know what the square is actually called and couldn't find what I'm looking for.
I tried autocomplete="off" on the input. I played arround with jQuery's preventDefault but without success.
Update:
Thanks for your responses. If anyone comes accross this question, here is the effect of appearance attached (upper pic without appearance, the one below is with appearance) with Firefox:
Just in case someone comes to the same problem.
Update with Chrome / Safari, appearance removes the input
-webkit-appearance: none; would make the radio buttons disappear in
Chrome and Safari. check jsfiddle.net/8uY6H (with Chrome)
– noted by JFK 6
Try this CSS since it is an outline:
input[type="radio"]:focus {
outline:none;
}
Try outline:0 property for the radio button on focus
input[type="radio"]:focus{
outline:0;
}
You need to set:
outline:none;
On the :focus state of the CSS class relating to the checkbox, or directly e.g.
input[type="radio"]:focus{
outline:none;
}
The crucial part is setting outline
The CSS outline property is a shorthand property for setting one or
more of the individual outline properties outline-style, outline-width
and outline-color in a single rule. In most cases the use of this
shortcut is preferable and more convenient.
However, also setting appearance may help cross platform where different browsers render checkbox elements differently.
As noted in the comments below though, this will cause the checkbox to not display in some circumstances- so you would need to produce a pure CSS solution.
The -moz-appearance CSS property is used in Gecko (Firefox) to display
an element using a platform-native styling based on the operating
system's theme.
This property is frequently used in XUL stylesheets to design custom
widgets with platform-appropriate styling. It is also used in the XBL
implementations of the widgets that ship with the Mozilla platform.
As simple as
input[type="radio"] {
outline: 0 none;
}
JSFIDDLE
Looking for a solution for a problem I'm having.
I am making a responsive website that has a select tag to allow users to pick which category of blog posts they want to display the html is just a basic select tag.
<select name="">
<option value="">Sort by Category</option>
<option value="">test</option>
<option value="">Test</option>
</select>
I then have styled the select tag with the following code
.portfolio-thumbs select {
width:100%;
padding:0.625em;
border:none;
background:#33c3e2;
color:#fff;
font-size:1.125em;
}
select {
-webkit-appearance: none;
border-radius: 0;
}
This works fine on Windows phone but on Iphone, Blackberry and Android the arrow for the select box does not display. Has anyone encountered this problem before and know what i am doing in my CSS to disable the arrow from displaying or have a solution to get the arrow back whilst still being able to style the select how i want.
The -webkit-appearance: none; line is telling webkit browsers (iPhone, BB and 'droid) to not display the default <select> appearance. Removing this line will restore the arrow.
As mentioned in the comments, <select> is a real pain to style. The only realistic option if you want real control of how it looks it to use a replacement technique as mentioned by #AdamMarshal.
Alternatively, if you absolutely must use a <select> and -webkit-appearance: none;, add a background image of an arrow.
You can add a class to select element and define "-webkit-appearance: auto" or "-webkit-appearance: initial" - this will also override user agent stylesheet (default browser's value for webkit appearance)
In all major browsers except IE9, it colors a disabled option's text to red this code:
<option disabled='disabled' class='red' value=''>No Students available to take up Assessment</option>
...
//CSS
.red{
color:red;
}
But in IE, it does not changed text color, it keeps it a grey disabled color. How can I get the disabled color to change in IE9?
perhaps use the attribute selector in CSS?
option:disabled,
option[disabled] {
color: red;
}
Something like this?
select :disabled.red {
color: red;
}
Here's a document about the :disabled pseudo-class from Microsoft.
Here's a fiddle that should work in IE9 and up.
Update: This seems to work only in IE>8. This answer points out the workaround of using the readonly attribute on form elements. That's not an option for the option tag though.
There are JavaScript workaround for old IEs around. A simple Google search led me to this site which provides a jQuery solution.
From the blog:
By adding a little css styling magic and you end up with an identical
outcome in all other modern browsers.
You can then enable and disable using javascript. Many people have
written code which makes an option look like it’s disabled, waits for
a click on the option element and then bluring it or focusing the next
/ previously selected option to make it act like it’s disabled.
I have come up with functions used with jQuery to disable / enable a
select option by converting it to an optgroup and back. It is tested
in firefox 2 & 3, safari 3, ie 6 + 7, and it works in Opera 9
(although the opgroups jump to the bottom)
I'm having trouble setting the background color (and text color) for the options in a <select> list in Google Chrome.
Seems to work fine in Firefox:
But not in Google Chrome:
Closed:
Open:
Code:
<html>
<head>
<style>
select
{
background:yellow!important;
}
option
{
background:red!important;
}
.c1
{
background-color:green!important;
color:red!important;
}
</style>
</head>
<body>
<select>
<option class="c1">nice long option name</option>
<option class="c2">nice long option name</option>
<option class="c3">nice long option name</option>
<option class="c4">nice long option name</option>
<option class="c5">nice long option name</option>
</select>
</body>
</html>
I wonder if Google Chrome is using it's own elements or perhaps elements of the host operating system to render the select box and perhaps this is why it doesn't work? Perhaps it's a good thing because those colors look fairly horrendous, but it would be nice if Chrome offered a little bit more control.
Try:
select { -webkit-appearance: none; }
Maybe that should help you.
If not.. than probably Chrome does not support it.
Yes, -webkit-appearance do the job well.
But, don not apply this rule on select element, assign it to option/optgroup:
option, optgroup { -webkit-appearance: none; }
This solves "white text on whitebackground" in Chrome on Ubuntu.
Hope, this help somebody.
I have ran into this issue before as well CWD. Seeing as Browser's have a default value with Forms and Form Elements sometimes you need to override the Browsers Setting via JavaScript/jQuery.
Check out this link: This may help with styling.
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements
In general, trying to style and elements is more trouble than it's worth. Cross browser support is horrendous. You will generally end up using a JS solution. If you're targeting one specific browser, you might be okay, but I'd just let browsers render and elements the way you want.
That said, if you're looking for a good JS solution to this, I've used Chosen and found it worked great. It will swap out your desired element with a div and li items, which you can style to your heart's content.
This has been an ongoing issue with sites using a dark theme. I found that applying this rule in the main css file solves the issue for me:
select { -webkit -appearance:none }
Hope it helps someone.