I can't change select height, with all browser working fine, but Safari no, where can be problem? Also I try make class .style select, but not working.
select {
width: 170px;
height: 25px;
}
Try adding this:
-webkit-appearance: menulist-button;
To style a select in Safari, you first have to turn off the os styling:
-webkit-appearance: none;
You can also use
line-height: 25px
which doesn't affect other browsers, but fixes this bug in Safari
The best way use modernizer detector and give safari class select menu a
line-height: 20px;
or you can use jquery UI select menu to solve this by another cross-browser wy.
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {
-webkit-appearance: menulist-button !important;
line-height:24px !important;
}
}
This code ensures the same height across browsers.
at least on iPad the select is not rendered for padding or line-height but instead will render given height and center vertically the value
select {
-webkit-appearance:menu-item; // or menulist-button
-moz-appearance:menu-item;
height:2.4em; // this must be calculated to match other input types
}
input[type="text"], select {
min-width:12em;
border-radius:5px;
}
the only thing unresolved now is background which is predefined and imutable
Nothing worked for me until I used inline style:
<select name="pickupsel" id="pickups" style="line-height:33px">
Somehow Safari (latest Windows version, 5.1.7) doesn't read this style property from CSS file.
#media screen and (-webkit-min-device-pixel-ratio:0) { select { -webkit-appearance: menulist-button !important; line-height:24px !important; } }
Give line-height according your requirement.
This is how I am solving this in 2022:
select, input {
font-size: 14px; //or whatever
height: 3em;
line-height: 3em;
padding: 0; //top and bottom must be 0
-webkit-appearance: none;
}
This is how I am solving this in 2022:
select {
background-color: inherit;
}
Related
I've set up my own custom scrollbar with CSS, and I'd like to know know how to only apply these settings to my vertical crossbar.
I've looked up other posts to fix this, but haven't been successful in implementing their solutions in my project.
Any fix that either removes my horizontal scrollbar completely or resets its settings to default would be greatly appreciated.
Here's my code:
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: rgb(26, 23, 23);
}
::-webkit-scrollbar-thumb {
background-color: hsl(270, 2.9%, 48.7%);
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: hsl(270, 2.9%, 78.7%);
}
edit: The problem seems to have been related to other pre-built styles overriding overflow-x. overflow-x: hidden !important; solved the issue.
The questioner have faced a problem that a WebKit engine won't allow him to remove customized horizontal scrollbar.
It seems that the implementation of such a removal vary from one browser to another and there's no universal way to hide scrollbars.
Using overflow: hidden will disable the scroll and that’s not what we want.
So we’ll need another way to hide the scrollbar.
Unfortunately, there is no universal CSS property that does something
like this
div {
scrollbar-visibility: hidden; /* <--- I wish we had this one !! */
}
We’ll need to implement different CSS properties for each browser.
For Firefox, we can set the scroll-bar width to none.
scrollbar-width: none; /* Firefox */
For IE, we’ll need to use -ms prefix property to define scrollbar style
-ms-overflow-style: none; /* IE 10+ */
For Chrome and Safari. We’ll have to use CSS scrollbar selector.
Then apply display: none to hide it.
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
Or you can set it’s width and height to 0.
::-webkit-scrollbar {
width: 0;
height: 0;
}
https://redstapler.co/css-hidden-scrollbar-while-scrollable-element/
Nevertheless, the following solution took effect in questioner's situation:
overflow-x: hidden !important;
Chrome and Opera render my page properly without issue, however IE11 and Edge do not.
I am using pure CSS to expand/collapse 3 section headings. It was my understanding IE 11 had more support for CSS3/webkit and I definitely thought Edge would of stepped up it's game.
https://jsfiddle.net/x0c5fsqh/
CSS Snippet
summary::-webkit-details-marker {
background: url(/images/toggle-expand.png) center no-repeat;
color: transparent;
font-size: 125%;
margin-right: 2px;
}
details[open] summary::-webkit-details-marker {
background: url(/images/toggle.png) center no-repeat;
color: transparent;
}
summary:focus {
outline-style: none;
}
article > details > summary {
font-size: 28px;
margin-top: 16px;
}
details > p {
margin-left: 24px;
}
details details {
margin-left: 36px;
}
details details summary {
font-size: 16px;
}
Rendered Properly
How IE/Edge renders it
All of the headings overlap in to the content of the previous sections that should be hidden and the toggle images do not appear at all. Just looks like the above CSS is completely ignored.
Any ideas?
From what I can see the <details> and <summary> elements are not supported in IE and Edge. It has nothing to do with supporting CSS3 features. It looks like those elements are part of the HTML5.1 spec.
Reference: MDN, WebPlatform, caniuse.com.
Take a look at the Resources tab on caniuse.com. There's a few links pointing to some polyfills.
As others have noted, CSS properties prefixed with -webkit- won't work in IE/Edge. Just as -o- or -ms- wouldn't work in Chrome.
I have a checkbox styled like so:
input[type="checkbox"] {
position:relative;
top:0.5em;
-webkit-appearance: none;
height: 1.25em;
width: 1.25em;
margin-right: 5px;
vertical-align: top;
}
input {
margin:0 0 0.2em 0;
border-radius:0.1em;
border:1px solid #d2d2d2;
padding:0.8em;
box-sizing:border-box;
font-size:16px;
color:black;
}
input[type="checkbox"]:checked::before{
content: "\f00c";
font-family:"FontAwesome";
position: absolute;
font-size: 1em;
left: 0.15em;
top:0.3em;
text-align: center;
width: 1.25em;
color: #678b4f;
}
Jsfiddle here.
It appears nicely in most browsers and until now, it seems to at least fall back to something useable in more awkward browsers that ignore -webkit-appearance.
However, in Edge, the checked version of the checkbox appears as a very small dot (rather than font awesome tick) that is barely visible. If I remove -webkit-appearance, that displays something useable but that then breaks it in the webkit browsers.
Anyone know how I can fix/get around this?
It is actually not a dot, its a super teeny tiny checkbox, because of the padding on the input. If you change it from 0.8em to 0.1em, you will see what i mean.
Moving the padding from the input element to the input[type="checkbox"]:checked::before selector it will work in all browsers the same.
The problem is that Edge actually supports -webkit properties, but the behavior of -webkit-appearance is unexpected (probably a bug). It seems that adding this property allows you to style the checkbox to a certain degree, but the original checkbox is rendered nonetheless. Interestingly despite setting the value to none the DOM inspector shows that it remains checkbox:
Microsoft's documentation says the following about -webkit-appearance: none:
Default. The appearance of an element is not changed.
Note that it says "not changed" when you would expect "not rendered". The docs seem to be about IE, so I'm not sure if it's relevant for Edge as well or at all.
One possible workaround is a hack, that only targets Webkit browsers. Add the selector body:not(*:root) before the actual selector:
body:not(*:root) input[type="checkbox"] {
You can try this
#supports (-ms-ime-align: auto) {
input[type="checkbox"] {
width:51px;height:51px;
}
input[type=checkbox]::-ms-check{
color:red;
border:0;
background:rgba(0,0,0,0);
}
}
This is for IE Edge #supports (-ms-ime-align: auto)
This is for checkbox when checked input[type=checkbox]::-ms-check
I've a Button with the following super simple css:
button {
background: #005eb8;
border: 0;
padding: 0;
color: white;
line-height: 50px;
}
"line-hight" is set to 50px. But the button is (in Firefox) 52px - I expected it to be 50. Is there any reason for that? In chrome the height is 50 as expected...
Code at JSBIN:
http://jsbin.com/jagiviyima/9?html,output
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: none;
padding:0;
}
Add such css rule.
You ask - is there some reason for that - I believe it is. I don't have Firefox at hand now, but you are using button html element and buttons typically have some default css rules applied to them across the browsers (these are obviously browser specific). My guess is FF is adding some default padding, margin, border or something of that kind to your own defined style. Try setting these to 0 explicitly.
A bit of googling yielded this SO answer which exlains the issue in a more detail, proposed resolution is:
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
Following this answer https://stackoverflow.com/a/17713753/407943
I've tried implementing the same solution but it does not work on my Windows 7 Firefox 22, this is what I get:
select {
-moz-appearance: window;
-webkit-appearance: none;
background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
padding-right: 20px;
}
#-moz-document url-prefix() {
.wrapper {
background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
padding-right: 20px;
}
}
EDIT: here's a jsfiddle http://jsfiddle.net/TGBEZ/1/
Update: this trick stopped working as of FF 30. No other fix so far. Keep your eyes on the full gist for updates.
How to remove the <select> arrow on Firefox:
-moz-appearance:none; doesn't work by itself. You need to add some text-indent and text-overflow. Like this:
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Live example: http://jsfiddle.net/joaocunha/RUEbp/1/
Learn the details on this gist: https://gist.github.com/joaocunha/6273016
This is a known bug of firefox which won't be corrected soon, or maybe even later (see this bugzilla).
There is a pure CSS/HTML workaround :
HTML :
<div class="styled">
<select></select>
</div>
CSS :
div.styled {
overflow: hidden;
padding: 0;
margin: 0;
}
div.styled select {
width: 115%;
background-color: rgba(0, 0, 0, 0);
background-image: none;
-webkit-appearance: none;
border: none;
}
The Fiddle
The problem here is that you will have to make sure the text won't be too large, otherwise it will get over the image.
Also, there are javascript solutions. Take a look at customselect, a jQuery plugin to easily create your own selects.
Another famous plugin : chosen
This is the only solution that really worked for me on FF/IE/Chrome:
Customized select dropdown arrow not clickable
Using -moz-appearance: window instead of none seems to be working now in FF 30
I have this working in Firefox 30+ with:
-moz-appearance: textfield;