Does anyone know how to get rid of this big ugly PLAY button on FireFox or IOS when I add a video background to my Web site?
I tried adding all types of CSS, such as what I am posting here without success. I am out of ideas on my end. None of these CSS entries made a difference and the Button is still displayer as a nuisance.
video:no-button {
display: none !important;
opacity: 0;
position: absolute;
z-index: -9999;
}
video::-webkit-media-controls {
display: none !important;
-webkit-appearance: none;
opacity: 0;
position: absolute;
z-index: -9999;
}
video::-webkit-media-controls-panel {
display: none !important;
-webkit-appearance: none;
opacity: 0;
position: absolute;
z-index: -9999;
}
video::--webkit-media-controls-play-button {
display: none !important;
-webkit-appearance: none;
opacity: 0;
position: absolute;
z-index: -9999;
}
video::-webkit-media-controls-start-playback-button {
display: none !important;
-webkit-appearance: none;
opacity: 0;
position: absolute;
z-index: -9999;
}
/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */
*::-webkit-media-controls-panel {
display: none !important;
-webkit-appearance: none;
}
/* Old shadow dom for play button */
*::-webkit-media-controls-play-button {
display: none !important;
-webkit-appearance: none;
}
/* New shadow dom for play button */
/* This one works! */
*::-webkit-media-controls-start-playback-button {
display: none !important;
-webkit-appearance: none;
}
Here is the video object call that I am using:
<video poster="~/video/Bubbles596_150_2.gif" playsinline autoplay muted loop>
<source src="~/video/1059946499-hd_1.mp4" type="video/mp4">
</video>
Related
I am trying to style the ion-refresher component background on one specific page, because it has a header. It works like expected in Safari, but on the device, it overlays everything on top.
I have tried some stuff with z-index (also with pseudo element) + positioning absolute, but I cannot get the ion-refresher to sit where it normally is. As soon as I add a background-color to the ion-refresher, it will overlay on top.
Any ideas on how to style the background of this element?
The CSS I used. Please note it only overlays everything when I add a background-color.
ion-refresher:global(.ios) {
height: 120px;
ion-refresher-content {
position: relative;
padding-top: 18px;
justify-content: start !important;
&::after {
content: '';
display: block;
width: 100%;
height: 120px;
position: absolute;
top: 0;
z-index: -9999;
background-color: purple;
}
}
:global(.refresher-pulling-icon) {
color: white;
}
ion-spinner {
color: white;
}
}
Any advice on how to debug this?
I've recently come across this issue that
pseudo selector :active doesn't display the same on React and Static page.
this is what I apply
css code exactly the same
I don't even understand why this selector renders on mobile differently according to the framework and static.
button {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
-webkit-appearance: none;
text-transform: none;
outline: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
}
.form_button {
display: block;
position: relative;
padding: 8px 0 8px 58px;
border: 1px solid red;
border-radius: 8px;
margin-bottom: 18px;
width: 200px;
height: 100px;
text-align: left;
}
.form_button:active {
background-color: green;
}
please check out these both link below on Iphone chrome broswer. ( not Android)
React page - https://codesandbox.io/s/elated-smoke-o8m2xo?file=/src/index.css:0-476
Static page without framework - https://codesandbox.io/s/vigorous-dew-vssmej
Does anyone know about this issue?
or any solution for this?
I'm working on porting my Chrome extension to Edge for wider availability - everything seems to run fine, except for the styling of the checkboxes. In Chrome, the default styling is a blue color, which works well for the look of the extension, but now the checkbox is grey in Edge. I've tried a few different ways to set the color (in JS styling, HTML, CSS) and nothing seems to work - anyone have experience with styling the color of a checkbox in Edge?
Setting the color of the checkbox alone may not work. I recommend you to try to design a custom checkbox.
This is a simple example:
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 17px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 16px;
width: 16px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 4px;
top: 0px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<h1>Custom Checkboxes</h1>
<label class="container">
check value
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
You can also modify its size or position according to your own requirements. For more details, you could also refer to How TO - Custom Checkbox.
Starting with version 93, Edge supports the accent-color CSS property.
The accent-color CSS property sets the accent color for user-interface controls generated by some elements.
Browsers that support accent-color currently apply it to the following HTML elements:
<input type="checkbox">
<input type="radio">
<input type="range">
<progress>
It can be used as follows:
input[type="checkbox"] {
accent-color: dodgerblue;
}
<input id="clickme" type="checkbox" checked><label for="clickme">Click Me</label>
for React Apps, when i want to hide the scrollbar using WEKBIT apparently i doesn't work on iOS web-view.
i'm using this code :
::-webkit-scrollbar {
width: 0px;
background-color: transparent;
overflow: hidden;
}
::-webkit-scrollbar-track {
background-color: transparent;
overflow-y: hidden;
display: none;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:focus {
background-color: transparent;
overflow-y: hidden;
display: none;
}
and it always shown up everytime, how do i fix that?
I have been trying to get my jQuery UI Select dropdown to be aligned on Chrome for some time. Its off by 1px however the list and the parent span.ui-selectmenu-button are both "151px".
All other browsers display it correct.
I've been going through the computer styles one by one but can't find anything.
Its instantiated with the common:
$("#mainlanguage").selectmenu();
And the select box which jQuery uses has basic styling on it. (SCSS)
jquery ui language !select
.mainSearch{
.ui-selectmenu-button {
background:$upsbrown;
outline-style:none!important; // reset
&.ui-state-hover{
border:0;
border-radius:0;
}
border:0;
border-radius:0;
left: 63.3%;
span{
background-color: $upsbrown;
background-position: 93.5% center;
//border-top: 1px solid $navtext;
color: $navtext;
font-size: 11px;
line-height: 18px;
position: relative;
padding-left: 6px;
max-width: 151px;
height: 21px;
z-index: 400;
webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
}
}