Category "css"

How to style child elements with vanilla extract?

I am starting to use vanilla extract to style a NextJS app. Is there any way to style child elements from the parent without creating another class? I have an s

How to configure a site-specific custom caret color for Dark Reader?

For script.google.com, I can make the entire page site dark, but when I do, I cannot see the cursor/caret. I've found the developer tools for Dark Reader, but

Adding shine animation not working in special cases

I have this function to shine any text element which is passed to it. The first example here works fine (the second example doesn't work, I provide this in case

Overriding element's css in Nebular/Angular

So I am trying to change the css of the header element of the nebular theme in angular It looks like so I want it to look like this I am trying to separate the

Command removing tailwindcss in the input.css

When I run: npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch My output.css gets mostly deleted, and only contains a handful of tailwind css, see

Stylesheet renders in grover debug but not on downloaded pdf

I'm using Grover to render and download pdf copies of documents that are generated in my app and am having trouble applying css to it. When in grover's debug m

How to target a styled component inside another styled component?

Instead of using div:first-child or div:nth-of-type(2) I would like to say Row or ColSm3 like we usually do in normal CSS, Is it possible to target a styled com

How to set a background image for all pages in reactjs

I tried to set a image to all pages as background. I have tried to set the style of the body tag of index.html <body style="background-image: url(%PUBLIC_URL

How do I randomly change an HTML element on a timer using Javascript - across the web, not just within the browser?

I'm creating a website with HTML, CSS, and JavaScript. I have a picture element on my page, among other elements. What I want to achieve is to randomnly change

How to make a Chakra ui react theme drawer have a closeButton icon that aligns to the beginning of the drawer

I'm following this Chakra Doc on how to create a drawer slideout menu: https://chakra-ui.com/docs/overlay/drawer using the following component: import React fro

Fieldset legend CSS rendering behavior has changed in recent months... what happened?

I have a form with various nested <fieldset> elements, each with a <legend>, and today I noticed an error in my web page on all the browsers I've ch

Setting CSS pseudo-class rules from JavaScript

I'm looking for a way to change the CSS rules for pseudo-class selectors (such as :link, :hover, etc.) from JavaScript. So an analogue of the CSS code: a:hover

How to Change Color of Knob in Bootstrap 5 Switch

So i want to change the knob color to match my color theme. But when i open the bootstrap.css, i could not find the reference to that. I can change the border a

Change the :active background-colour of the React-Bootstrap tabs

I am new to bootstrap but I am a bit fluent in React. I just want to ask how to change the :active background colour of the react-bootstrap tabs. Here is the li

CSS-only Parallax background stopped working on all devices/browsers

I noticed this happening a couple of weeks ago on a website that I built and have worked on since 2017. On the landing page of this site, there's two sections t

What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?

What is the difference between these two selectors? .classA.classB { border: 1px solid; } .classA .classB { border: 1px solid; }

is implicit styling of h2 tag required even if its parent div is already styled to center align?

This is my HTML code (I am practicing HTML!) and CSS file: /*styling the child, descendants*/ /*Individual selectors*/ * { margin: 0; padding: 0; }

How to make links clickable in text?

I develop a web app where users can post text, images, Files a post text can contain links also, for example this is my webpage link: https://demo.com/page1/hom

add a triangle icon to the div opening and closing

I have the code where onclick of the link, i am opening and closing the div here is the code <div id="opendialog" style="display:none;"> <div st

Bootstrap auto column width but all columns still use 100% of parent width

I have a <div> with two columns. (I use two columns so I can left-align the left column and right-align the right column.) <div class="section-header"&