Select options are transparent on Mozilla Firefox - css

I use a lang switcher with land flag as select background that change when the lang change.
Everything works as expected but on Mozilla Firefox the options are transparent, except on hover. I cannot find anything to fix it.
I've made a stackblitz so You can better see the problem: (The images are not the good ones, that why it render "ugly")
https://stackblitz.com/edit/angular-u5jgzt
Thanks for help me / sharing me link that can help me.
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
/**
* define the current language in the app
*
* #type {('français' | 'english')}
* #memberof LangSwitcherComponent
*/
currentLang: 'français' | 'english' = 'français';
/**
* Change the translation language
*
* #param {*} event
* #memberof LangSwitcherComponent
* #returns {void}
*/
changeLang(): void {
this.currentLang = this.currentLang === 'français' ? 'english' : 'français';
}
}
app.component.css
select {
-webkit-appearance: none;
-moz-appearance: none;
height: 21px;
width: 21px;
border-radius: 100%;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Flag_of_France_%281794%E2%80%931815%2C_1830%E2%80%931958%29.svg/250px-Flag_of_France_%281794%E2%80%931815%2C_1830%E2%80%931958%29.svg.png');
background-size: cover;
border: 1px solid #fff;
color: transparent;
cursor: pointer;
}
select.en {
background: url('https://upload.wikimedia.org/wikipedia/commons/f/f2/Flag_of_Great_Britain_%281707%E2%80%931800%29.svg');
background-size: cover;
}
select option {
background-color: white;
padding: 10px;
}
p {
font-size: 15px;
line-height: 19px;
margin: auto;
margin-top: 1px;
}

You need too specify color CSS in the options
select option {
color: black;
}

Just update the select option style to:
select option {
background-color: white;
padding: 10px;
color: #000;
}
You are setting color: transparent in the select{ } style and that one cascades down to the option.

Related

CSS using styled-components and color themes messing up

Image of the problem.
So i have themes and colors defined in my React app.
Everything works well except these labels. When i change the theme to green and then change it back to blue and then when i focus on the input, the color again changes to the opposite theme. I don't understand what I'm doing wrong. Also this problem only occurs after i change the theme. Initially when i focus on the input the label remains blue.
This is my code for the theme part.
{
type: "light",
primaryColor1: "#33b2ff", //lightest
primaryColor2: themeColor === "blue" ? "#009fff" : "#00b05d", //ChangeColor()
primaryColor3: "#007fcc", //darkest
textColor1: "#111", //darkest
textColor2: "#555",
textColor3: "#888", //lightest
backgroundColor1: "#fcfcfc", //lightest
backgroundColor2: "#e3e3e3",
backgroundColor3: "#cacaca", //darkest
borderColor: "009fff",
white: "#fff",
black: "000",
}
This object returns all my theming colors but the primary color part is where it checks a state called themeColor which when set to blue, returns blue as the primary color for the entire app or green if otherwise. The entire app is wrapped with useContext's Provider and the Theme is passed via styled-components' ThemeProvider like so:
import { ThemeProvider } from "styled-components";
<ThemeContext.Provider value={{theme,themeToggler,themeColor,setThemeColor}}>
<ThemeProvider theme={themeStyle}>
{children}
</ThemeProvider>
</ThemeContext.Provider>
This is the CSS part using styled-components for the Input and Label elements:
export const Input = styled.input( ({theme}) => `
border-radius: 10px;
width: 100%;
font-size: 1rem;
background: ${theme.backgroundColor3};
border: 0;
color: ${theme.textColor1};
line-height: 50px;
padding: 5px 20px;
box-sizing: border-box;
font-family: Montserrat;
&:focus
{
outline: none;
}
&[type=password]
{
font-size: 1.75rem;
}
`);
export const Label = styled.label( ({theme}) => `
font-size: 1rem;
font-family: Montserrat;
color: ${theme.textColor3};
cursor: text;
position: absolute;
top: 30%;
left: 5.5%;
border: 1px solid ${theme.borderColor};
transition: 0.2s ease all;
background: none;
${Input}:focus + &,
${Input}:not(:placeholder-shown) + &
{
background: ${theme.primaryColor2};
padding: 0.2rem 0.5rem 0.2rem;
border-radius: 0.5rem;
top: -15%;
left: 3%;
font-size: 0.9rem;
color: #fff;
}
`);
Maybe !important rule solve your problem. You can try write !important after your css properties.
Example:
background: ${theme.primaryColor2} !important;

How to style VideoJS with Next.js

I am building a react video component based on VideoJS and I used to style VideoJS player using a stylesheet of mine but since I import it as recommended by Next.js documentation, some class targeting seem not to work properly and my custom CSS does not apply to .video-js css components.
This works:
.video {
font-family: 'Inter', -apple-system, Helvetica;
font-weight: bold;
}
.video *:before {
text-shadow: 1px 1px 7px rgba(10, 10, 10, 0.5);
}
This doesn't work:
/* Big play button */
.video .vjs-big-play-button {
height: 2em;
width: 2em;
font-size: 5em;
line-height: 2em;
border: none !important;
border-radius: 9999px;
}
My VideoPlayer component:
import { useCallback, useEffect, useState } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css'
import styles from '../styles/video-player.module.css';
function VideoPlayer(props) {
const [videoEl, setVideoEl] = useState(null);
const onVideo = useCallback((el) => {
setVideoEl(el)
}, [])
useEffect(() => {
if (videoEl == null) return
const player = videojs(videoEl, props)
return () => {
player.dispose()
}
}, [props, videoEl])
return (
<div data-vjs-player>
<video className={`video-js ${styles.video} vjs-big-play-centered`} ref={onVideo}/>
</div>
)
}
export default VideoPlayer;
As I mentioned, I used to style video.js player this way and it always worked perfectly until I switched to Next.js. Even stranger, the .video class doesn't appear in the browser's developer tools when inspecting the page.
Is there a way I could apply my custom styling properly with Next.js ?
So after looking for a workaround, I found that styling my custom video component in my global.scss file would actually work. I don't particularly know why specifically but here's how you can do:
This is my global.scss file:
/* Base styling */
/* .class { ... } */
/* VideoJS styling -> */
.video-js.video {
* {
& :before {
text-shadow: 1px 1px 7px rgba(10, 10, 10, 0.5);
}
}
&:hover {
.vjs-big-play-button {
background-color: rgba(255, 255, 255, 1);
}
}
.vjs-big-play-button {
height: initial;
width: initial;
font-size: 5em;
line-height: 6.15rem;
padding: 1em;
border: none;
border-radius: 9999px;
background-color: rgba(255, 255, 255, 0.8);
& :before {
margin: 0;
padding: 0;
}
}
.vjs-control-bar {
width: 90%;
min-height: 5em;
margin: 2rem auto;
padding: 0 1em;
border-radius: 1em;
}
}
So you won't have to import '../styles/video-player/module.scss' in VideoPlayer React component

CSS3, Angular 8, Algolia - Custom Stylesheet not overriding Widget Style

I have an input field defined by Algolia InstantSearch v3.35.1 widget ais-search-box that is not responding to overrides in my custom .css file.
I show the relevant info below. Looking at the input field element using the browser debugger, it does appear that the correct widget style to override is input.ais-SearchBox-input. The style override also appears correct, having successfully done it in other areas.
Any ideas on what my mistake is?
Thanks,
Bob
Snip from Browser Debugger
Widget Style
.ais-SearchBox-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0.3rem 1.7rem;
width: 100%;
position: relative;
background-color: #fff;
border: 1px solid #c4c8d8;
border-radius: 5px; }
.ais-SearchBox-input::-webkit-input-placeholder {
color: #a5aed1; }
.ais-SearchBox-input::-moz-placeholder {
color: #a5aed1; }
.ais-SearchBox-input:-ms-input-placeholder {
color: #a5aed1; }
.ais-SearchBox-input:-moz-placeholder {
color: #a5aed1; }
Override Style - tmd_basic.css
.mySearchField .input.ais-SearchBox-input{
font-size: 14px;
font-weight: 600;
padding-left: 5px;
padding-bottom: 10px;
background-color: red;
}
search.component.ts
import {Component, OnInit} from '#angular/core';
import {FadeInTop} from "../../shared/animations/fade-in-top.decorator";
import {ActivatedRoute} from '#angular/router';
import algoliasearch from 'algoliasearch/lite';
#FadeInTop()
#Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['../../../assets/css/tmd_basic.css']
})
export class SearchComponent implements OnInit {
search.component.html
<ais-instantsearch [config]="config">
<ais-search-box placeholder="Let's find something on TMD..." class="mySearchField"></ais-search-box>
</ais-instantsearch>
Try the below CSS.
mySearchField .ais-SearchBox-input{
font-size: 14px !important;
font-weight: 600 !important;
padding-left: 5px !important;
padding-bottom: 10px !important;
background-color: red !important;
}

How to do CSS customization in ejs-dropdownlist in Angular

<ejs-dropdownlist [dataSource]='data' placeholder='Search Fields' class="ejs-dropdownlist">
</ejs-dropdownlist>
this is my html tag and I want the placeholder to have font-size 15 and color grey.
How to do it?
to do these kind of process, open developer console and inspect to element find class name of element. Then in style.css write the css code. For library element component.css does't work. You need to use style.css
select .e-input::placeholder {
font-size: 15px;
color: grey;
}
select .e-input::-webkit-input-placeholder {
font-size: 15px;
color: grey;
}
select .e-input::-ms-input-placeholder {
font-size: 15px;
color: grey;
}
You can do it with:
select + input::-webkit-input-placeholder { /* Edge */
font-size: 15px;
color: grey;
}
select + input:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-size: 15px;
color: grey;
}
select + input::placeholder {
font-size: 15px;
color: grey;
}
But here you can find something similar: How to change placeholder color of specific input field?

Why css hover is affecting only bookmarks?

I have 5 links on site, they are styled with css, and they should turn black after mouse hovers on them. Links to extrenal pages doesn't turn black, only links to bookmarks on page are turning black.
I tried diffrent styling and nothing works. It works normally without React and without the server.
css styling:
.menu_link {
border: none;
text-decoration: none;
color: darkgreen;
height: 100%;
width: 20%;
text-align: center;
font-size: calc(1em + 1vw);
font-family: pokemon-hollow;
}
.menu_link:hover {
color: black;
background-color: beige;
}
.menu_link:visited, .menu_link:link {
color: darkgreen;
}
MenuLink class:
import React from 'react';
import './MenuLink.css'
class MenuLink extends React.Component {
render() {
return (
<a href={this.props.href} target={this.props.target} className="menu_link" >{this.props.name}</a>
)
}
}
export default MenuLink;
Menu class:
import React from 'react';
import './Menu.css';
import '../MenuLink/MenuLink'
import MenuLink from '../MenuLink/MenuLink';
class Menu extends React.Component {
render() {
return (
<div id='menu'>
<MenuLink id="main_container" name="Home"/>
<MenuLink href="https://bulbapedia.bulbagarden.net/wiki/Fennekin_(Pok%C3%A9mon)" name='Fennekin' target='_blank' />
<MenuLink href="https://bulbapedia.bulbagarden.net/wiki/Braixen_(Pok%C3%A9mon)" name='Braixen' target='_blank' />
<MenuLink href="https://bulbapedia.bulbagarden.net/wiki/Delphox_(Pok%C3%A9mon)" name='Delphox' target='_blank' />
<MenuLink id="main_container" name="Galery"/>
</div>
)
}
}
export default Menu;
No errors, but when I force on hover on link in chrome developer tools i get this:
color: black;
You are overriding .menu_link hover styles with these
.menu_link:visited, .menu_link:link {
color: darkgreen; /*this will override .menu_link:hover styles*/
}
If css specificity is exactly the same, order does matter. Styles declared later will be applied.
So change your css to the below:
.menu_link:visited, .menu_link:link,.menu_link {
border: none;
text-decoration: none;
color: darkgreen;
height: 100%;
width: 20%;
text-align: center;
font-size: calc(1em + 1vw);
font-family: pokemon-hollow;
}
.menu_link:hover {
color: black;
background-color: beige;
}
The problem was the order of lines.
.menu_link:visited, .menu_link:link {
color: darkgreen;
}
were after
.menu_link:hover {
color: black;
background-color: beige;
}
and they were overwriting hover selector. Changing the order to:
.menu_link:visited, .menu_link:link {
color: darkgreen;
}
.menu_link:hover {
color: black;
background-color: beige;
}
was what fixed the problem.
Bookmarks links weren't affected, probably because they can't have state :visited or :link.

Resources