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
Articles on Trending Technologies
Technical articles with clear explanations and examples
Hide Dropdown Arrow for Select Input with CSS appearance
The CSS appearance property controls how form elements are displayed by removing or applying platform-native styling. It's commonly used to hide dropdown arrows in select elements and number input spinners for custom styling. Syntax selector { appearance: value; -webkit-appearance: value; /* Safari and Chrome */ -moz-appearance: value; /* Firefox */ } Possible Values ValueDescription noneRemoves all platform-native styling autoDefault browser styling (default value) textfieldStyles element as a plain text field Example 1: Hide Dropdown Arrow for Select Element ...
Read MoreCustom Radio Buttons with CSS appearance Property
The CSS appearance property allows you to style form elements like radio buttons with custom designs instead of the default browser styling. By setting appearance: none, you can create completely customized radio buttons that match your website's design. Syntax input[type=radio] { appearance: none; -webkit-appearance: none; -moz-appearance: none; } Example: Basic Custom Radio Button The following example creates custom radio buttons with rounded corners and color changes on selection − input[type=radio] { ...
Read MoreCustom Checkbox with CSS appearance Property
The CSS appearance property is used to control how form elements display according to the operating system's native styling. When set to none, it removes default styling, allowing you to create completely custom checkboxes with unique designs. Syntax selector { appearance: value; } Possible Values ValueDescription noneRemoves all platform-native styling autoUses the default platform styling (default value) Method 1: Round Custom Checkbox The following example creates a round custom checkbox using appearance: none and border-radius: 50% − ...
Read MoreCSS Styling of File Upload Button with ::file-selector-button Selector
We can style the file upload button using the CSS pseudo-element ::file-selector-button. However, the full support of this pseudo-element is limited to Firefox and Firefox Android. The ::-webkit-file-upload-button is used to support Safari, Chrome and Opera. Syntax selector::file-selector-button { property: value; } selector::-webkit-file-upload-button { property: value; } Style File Upload Button With ::file-selector-button The following example illustrates CSS ::file-selector-button selector. On hover, we have styled it with a grab cursor, purple background, and inset shadow − input[type="file"] ...
Read MoreHow to use Google Fonts on your web page?
Google Fonts is a free web font service launched by Google in 2010 that provides access to over 1, 500 font families. You can easily integrate these fonts into your web pages using the element or CSS @import rule to enhance your website's typography. Syntax /* Method 1: Using link element in HTML head */ /* Method 2: Using CSS @import */ @import url('https://fonts.googleapis.com/css2?family=Font+Name&display=swap'); /* Apply the font */ selector { font-family: "Font Name", fallback-font; } Method 1: Using Link Element The most common method is ...
Read MoreHow to add Google Charts to your web page?
Google Charts is a powerful JavaScript library that allows you to create interactive charts for web pages. You can add Google Charts to your web page using the google.charts.load() method and display various chart types like bar charts, pie charts, and line charts. Syntax google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { // Chart configuration and drawing code } Configure the Chart Data First, create a function to configure the chart data. The data is structured using Google's DataTable format − function drawChart() { var ...
Read MoreHow to create a responsive blog layout with CSS?
A responsive blog layout consists of a header with logo and navigation, main content area, and footer. The layout adapts to different screen sizes using CSS media queries and flexible design principles. Let's build a complete responsive blog layout step by step. Syntax /* Basic responsive blog structure */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } @media screen and (max-width: 768px) { /* Mobile styles */ } Example: Complete Responsive Blog Layout The ...
Read MoreHow to create a responsive zig zag (alternating) layout with CSS?
A responsive zig zag (alternating) layout creates a visually appealing pattern where content alternates between left and right sides. The layout typically features text and images that switch positions − image left with text right, then text left with image right, and so on. On smaller devices, the columns stack vertically for better mobile viewing. Syntax .container { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .row:nth-child(even) { flex-direction: row-reverse; } ...
Read MoreHow to create a mixed column layout grid with CSS?
A mixed column layout grid in CSS is a responsive design technique that allows columns to adjust their width and arrangement based on screen size. This creates a flexible layout that works well on desktop, tablet, and mobile devices. Syntax .column { float: left; width: percentage; box-sizing: border-box; } @media screen and (max-width: breakpoint) { .column { width: new-percentage; } } Example: Responsive 4-Column Grid ...
Read MoreHow to create a list grid view with CSS and JavaScript?
A list grid view allows users to switch between displaying content in a grid layout (multiple columns) or a list layout (single column). This is commonly used in dashboards, galleries, and data presentation interfaces where users need different viewing options. Syntax /* Grid Layout */ .column { float: left; width: 50%; } /* List Layout */ .column { width: 100%; } Example: Interactive List Grid View The following example creates a switchable list/grid view with JavaScript − ...
Read More