I keep running into these super strange bugs on safari. In this one, the option value is blank on MacOS Safari or iOS Safari. I've tried all sorts of css styling to bring it back into the light, but nothing seems to do the trick.
My google searches have also proven to be dead ends.
option {
border:1px solid black;
}
<span>
<option value="1">1</option>
</span>
Related
I'm working on a website that will be viewed across three browsers - Chrome, FireFox, and Safari (both desktop and iPad).
I am trying to change the color of a disabled field on all browsers, so I have been using the following code:
input:disabled {
color: black;
}
<input value="testing" disabled></input>
I want the color of the disabled text to show as black. This works perfectly in Chrome and FireFox, but in Safari, it's still showing up as gray. Can anyone give any suggestions on how to change this field in Safari?
Solved this by adding the following to my CSS:
-webkit-text-fill-color: black;
Hope this helps someone else one day!
I created a Dropdown with
.some_class {
border: 1px solid #7f9db9;
}
<select id="some_id" class="some_class" size="1">
<option selected="selected" value="1">User1</option>
<option value="2">User2</option>
<option value="3">User3</option>
</select>
and it is working fine in the most cases. The Problem is, that sometimes huge empty spaces appear between the listed elements in the dropdown when using Chrome. It looks like something increased the line distance between the element or something like that.
The weird thing is that this bug does not appear in every chrome if i test it with different users / at different computers.
Is it possible that there are any settings in the browser which cause this problem?
The extra spacing is a "feature" introduced in Chrome 59. If it thinks you have a touch device, it makes the options taller. Currently the only way to disable this feature is to disable all touch devices.
https://bugs.chromium.org/p/chromium/issues/detail?id=739196&q=dropdown&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
There were similar questions in the past but I ask it anyway because many things changed. See the following:
https://jsfiddle.net/32sn0L37/1/
<select>
<option>hello1</option>
<option>hello2</option>
<option>hello3</option>
</select>
select { font-size: 300%; }
The font size of the option texts in the dropdown list changes in all major browsers (IE, Chrome, Opera) except in Firefox.
Any idea how to increase it in FF too from CSS or JS? Thanks.
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)
I'm working on an multi select, the select part works fine on all browsers but the styling is only working in firefox. Its the following link:
http://jsfiddle.net/PbYFT/119/
So my question is, how can I get the styling the same in other browsers as it is in Firefox.
Kind regards
styling forms is not easy at all.. every browser render the input and selects in different ways, some allow styling (like FF), some don't (like chrome)...
So you could save you a headache if instead of adding a margin you add white spaces before the content:
<div>
<SELECT NAME="categorie" MULTIPLE SIZE=21 id="multiselect">
<OPTION VALUE="telefoontoestellen">-Telefoon toestellen
<OPTION VALUE="smarthphone"> -Smarthphone
<OPTION VALUE="iphoneapple"> -Iphone / Apple
hope this helps