Using the CSS pointer-events property we can control whether a mouse and touch are allowed on an element.The syntax of CSS pointer-events property is as follows −pointer-events: auto|none;Above, auto is default. Element reacts to pointer events, whereasnone: Element does not react to pointer eventsExampleThe following examples illustrate CSS pointer-events property. Live Demo a {    margin: 10vh;    pointer-events: none; } a:last-of-type {    pointer-events: auto; } No pointer event here Automatic pointer event here OutputThis will produce the following result −Example Live Demo select {    margin: 10vh;    pointer-events: none; ... Read More

To disable the default scroll anchoring provided by web browsers, we can use the overflow-anchor property. To disable scroll anchoring, set the overflow-anchor property to none − body { overflow-anchor: none; } To enable the scroll anchoring, set the value to auto that is also the default value. However, scroll anchoring behavior is enabled by default in any web browser. Disable Scroll Anchoring Let us see the example to disable scroll anchoring − Example body { ... Read More

We can store extra information about elements using data-* attribute. The following examples illustrate CSS data-* attribute.Example Live Demo dl {    margin: 2%; } p {    width: 60%;    background-color: lightgreen;    padding: 2%;    color: white;    text-align: center; } dt {    font-weight: bold; } dt:hover {    cursor: pointer; } dd {    font-style: italic; } Tea Hot Spicy Tea or Ice Lemon Tea Toast Hot Garlic Butter Toast (hover over food item) function showDescription(food) {    let foodType = food.getAttribute("data-food-type");    document.querySelector('p').textContent = ("We ... Read More

To get and set the variables with JavaScript, we can use various methods. The getComputedStyle() method gives an object which includes all the styles applied to the target element. The getPropertyValue() method is used to obtain the desired property from the computed styles. The setProperty() is used to change the value of CSS variable. The following example illustrate how we can get and set CSS variables using JavaScript. First, we have called the two custom methods − The showColor() method use the getPropertyValue() method to get the property − function showColor() { let ... Read More

To customize the style for the input textbox having a placeholder, we use the :placeholder-shown pseudo-class of CSS. Placeholder text is a hint for the user to understand what is to be typed in the input text field. The following examples illustrate CSS :placeholder-shown pseudo-class. Set the border for the text field The border for the text field is set using the border-color property. Place it inside the placeholder-shown pseudo-class as shown below − input:placeholder-shown { border-color: dodgerblue; } Example Let us see the example − ... Read More

We can create a customized checkmark using CSS. The following examples illustrate this effect −Example Live Demo div {    margin: 2%;    position: relative;    width: 40px;    height: 40px;    box-shadow: inset 0 0 12px lightblue; } div::before {    content: "";    position: absolute;    width: 8px;    top: 50%;    height: 50%;    border-radius: 2px;    background-color: rgb(123, 45, 20);    transform: translateX(12px) rotate(-45deg);    transform-origin: left bottom;    z-index: +1; } div::after {    content: "";    position: absolute;    bottom: 0;    height: 8px;    width: 100%;    border-radius: 2px;    background-color: rgb(200, ... Read More

Use the ::placeholder pseudo-element, we can change the placeholder text color for textboxes. Also, use the :last-child pseudo class for the form input. Syntax The syntax of CSS ::placeholder pseudo-element is as follows − ::placeholder { attribute: /*value*/ } Default Placeholder Example Let us first see how a default placeholder color looks like − Fill the form First Name Placeholder With a Different Color ... Read More

Pseudo-Class A pseudo-class represents a state of a selector like :hover, :active, :last-child, etc. These start with a single colon(:). Syntax The syntax of CSS pseudo-class is as follows − :pseudo-class{ attribute: /*value*/ } Pseudo-Element Similarly, a pseudo-element is used to select virtual elements like ::after, ::before, ::first-line, etc. These start with a double colon(::). Syntax The syntax of CSS pseudo-element is as follows − ::pseudo-element{ attribute: /*value*/ } Change the Link on Hover The following example illustrate changing the link on hover using the CSS pseudo class − Example ... Read More

Create a fixed header on scroll in HTML tables using the position property with the value sticky and top property 0. Set both these properties for the header i.e., the element. We will see two examples to set fixed headers on scroll, one using flex and another without using the flex concept. Create a fixed header on scroll using flex The following example give us an idea to create a fixed header on scroll with flex − Set the container for the table A container div is included and within that the table is set using the . ... Read More

Using the CSS :not() pseudo-class, we can refine our styling by selecting those elements which do not have a specific value or does not match a selector. Select Elements not Having a Child Selector To select elements not having a child selector, use the :not pseudo-class in CSS. Here, we have a child selector. The CSS child selector is used to select all the child elements with a particular parent element. It selects all the elements that are children of i.e. div>p But we have selected elements not having this div>p − p:not(div>p) { ... Read More