Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Web Development Articles
Page 587 of 801
Change Cursor Color with CSS caret-color
The CSS caret-color property allows you to change the color of the text cursor (caret) in editable elements like input fields and textareas. This property enhances the visual design of forms by customizing the cursor to match your website's color scheme. Syntax selector { caret-color: value; } Possible Values ValueDescription colorAny valid CSS color value (name, hex, rgb, etc.) autoBrowser default color (usually black) transparentMakes the caret invisible Example 1: Changing Input Field Cursor Color The following example demonstrates how to change the cursor color in ...
Read MoreControlling Whether Mouse & Touch Allowed with CSS pointer-events Property
The CSS pointer-events property controls whether an element responds to mouse events, touch events, and other pointer interactions. When set to none, the element becomes "click-through" and ignores all pointer events. Syntax selector { pointer-events: auto | none; } Possible Values ValueDescription autoDefault value. Element responds to all pointer events normally noneElement ignores all pointer events and becomes "click-through" Example 1: Disabling Link Clicks The following example shows how to disable pointer events on links − ...
Read MoreDisabling Scroll Anchoring with CSS
To disable the default scroll anchoring provided by web browsers, we can use the overflow-anchor property. Scroll anchoring automatically adjusts the scroll position when content is added above the current viewport to maintain the user's reading position. Syntax selector { overflow-anchor: value; } Possible Values ValueDescription autoDefault value. Scroll anchoring is enabled noneDisables scroll anchoring behavior Example 1: Disable Scroll Anchoring on Body The following example disables scroll anchoring for the entire page − body { ...
Read MoreUsing Data-Attributes (data-*) in CSS
CSS data attributes allow you to store custom information on HTML elements and access it through CSS selectors and the attr() function. These attributes must start with data- followed by a custom name. Syntax /* Selecting elements with specific data attributes */ [data-attribute] { /* styles */ } [data-attribute="value"] { /* styles */ } /* Using data attribute values in CSS */ element::before { content: attr(data-attribute); } Example 1: Interactive Food Menu with Data Attributes This example demonstrates how data attributes can store additional information and interact with JavaScript ...
Read MoreGet and Set CSS Variables with JavaScript
To get and set CSS 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() method is used to change the value of CSS variable. Syntax /* Getting CSS Variable */ getComputedStyle(element).getPropertyValue('--variable-name'); /* Setting CSS Variable */ element.style.setProperty('--variable-name', 'value'); Methods Used MethodPurpose getComputedStyle()Returns computed styles of an element getPropertyValue()Gets the value of a specific CSS property setProperty()Sets the value of a CSS ...
Read MoreUsing CSS :placeholder-shown to Customize Styles for Empty Text Input
The CSS :placeholder-shown pseudo-class is used to style input elements when they are displaying placeholder text. This pseudo-class allows you to customize the appearance of empty text fields that show placeholder hints to users. Syntax input:placeholder-shown { /* CSS properties */ } Method 1: Setting Border Color You can change the border color of input fields when they display placeholder text using the border-color property − input { padding: 10px; ...
Read MoreHow to Create a Checkmark / Tick with CSS
Creating a checkmark (tick) symbol with pure CSS is useful for custom form controls, success indicators, and interactive elements. CSS allows us to create checkmarks using borders, pseudo-elements, or transforms without requiring icon fonts or images. Syntax .checkmark { /* Create using borders and rotation */ border-right: 2px solid color; border-bottom: 2px solid color; transform: rotate(45deg); } Method 1: Using Borders and Transform This method creates a checkmark by styling a div with bottom and right borders, then ...
Read MoreDifference Between Pseudo-Class and Pseudo-Element in CSS
CSS pseudo-classes and pseudo-elements are powerful selectors that allow you to style elements based on their state or create virtual elements. Understanding the difference between them is crucial for effective CSS styling. Syntax Pseudo-classes use a single colon (:) while pseudo-elements use a double colon (::) − /* Pseudo-class syntax */ selector:pseudo-class { property: value; } /* Pseudo-element syntax */ selector::pseudo-element { property: value; } Pseudo-Class A pseudo-class targets elements in a specific state or position, such as :hover, :active, :first-child, or :last-child. They ...
Read MoreHTML Tables with Fixed Header on Scroll in CSS
We can create HTML tables with fixed header on scroll using CSS. It helps to increase readability as user doesn't have to scroll everytime to check the table header. In this article, we will learn and understand two different approaches for HTML tables with fixed header on scroll in CSS. We have a table inside a div element with class name as container. Our task is to fix HTML table header on scroll using CSS. Syntax /* Method 1: Using position sticky */ th { position: sticky; top: ...
Read MoreCSS Selector to Select Elements Not Having Certain Class / Attribute / Type
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. Syntax selector:not(selector) { property: value; } 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. ...
Read More