HTML:
<video id="video-stream" autoplay playsinline></video>
CSS:
*::-webkit-media-controls {
display: none !important;
-webkit-appearance: none !important;
}
*::-webkit-media-controls-panel {
display: none !important;
-webkit-appearance: none !important;
}
*::-webkit-media-controls-play-button {
display: none !important;
-webkit-appearance: none !important;
}
*::-webkit-media-controls-start-playback-button {
display: none !important;
-webkit-appearance: none !important;
}
Some of the CSS above was removing play/pause buttons in iOS 15, but it no longer works in iOS 16 - the buttons show, and pause button disappears after some time once video stream starts.
Thank you!
Is it possible the problematic element has controls="false" on it?
I was experiencing the same behavior on my video but it resolved after omitting controls="false". I appreciate your example doesn't specify this but that's the only way I've been able to replicate the behavior specified in your post.
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;
I have an email contact form, with a submit button, and some basic styling on the button. All of the styles work on Desktop, and most of the styles are applied on mobile, just not the padding or border-radius. I already tried switching to EM units instead of pixels. The url is http://sharperprogrammer.com/contact (not self-promoting, just thought it would help to see the full thing)
HTML:
<input type="submit">
CSS:
input[type=submit] {
background-color: #4CAF50;
color: white;
/* padding: 12px 20px; */
padding: 1.2em 2em;
border: none;
border-radius: 0.4em;
cursor: pointer;
margin: 10px;
}
I have even connected my iPhone to my Mac and opened the Safari Developer Tools, and I can check and uncheck to toggle different styles on the button, but the padding seems to do nothing. It's weird to me because the other styles like the background-color work fine, so I know everything is connected at least. Thanks for taking a look!
Edit: The style is just fine on an Android phone's Chrome browser, but the styling isn't applied correctly on my iPhone's Chrome or Safari browser. And I've cleared my browser cache just in case.
Here is a screenshot:
It looks to me like Safari / Chrome Mobile have some default button styles that are more specific than input [type=submit]. Perhaps the more specific styles don't specify background-color which is why yours is working.
I found two solutions, which I will link below, that both vouch for adding -webkit-appearance: none; as a solution.
CSS submit button weird rendering on iPad/iPhone
Why is my button style changing when on laptop and mobile
Hopefully this will work for you :)
Try to add this:
in the navbar.css file inside media query :
#media only screen and (max-width: 600px) {
.navbar{
flex-direction: column;
align-items: center;
}
}
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;
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;
}