We use the appearance property to style an element according to the platform-native style of the user’s operating system. The custom checkbox looks different from the default checkbox, and after selecting it the appearance will change. Syntax The syntax of CSS appearance property is as follows − Selector { appearance: /*value*/; -webkit-appearance: /*value*/; /*for Safari and Chrome */ -moz-appearance: /*value*/; /*for Firefox */ } Create a Round Custom Checkbox To create a round custom checkbox, we have set the following style with border-radius and box-shadow. The appearance is set ... Read More

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 The syntax of CSS file-selector property is as follows − Selector::file-selector-button { attribute: /*value*/ } Selector::-webkit-file-upload-button { attribute: /*value*/ } Style File Upload Button With ::file-selector-button The following example illustrate CSS file-selector-button selector. On hover, we have styled it like this − input[type=file]::file-selector-button:hover { cursor: grab; ... Read More

The different methods of creating a css expression are listed below −Using a class as css selectorThis will select all the web elements of that particular class. (Represented by (.) for example - .classname)Using an id as css selector.This will select the web element of that particular id. (Represented by (#) for example - #ID)Using a tagname and attribute value as selector.This will select the web element of that particular attribute value combination. (Represented by tagname [attribute=’value’])Exampleimport org.openqa.selenium.By; import org.openqa.selenium.Keys; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import java.util.concurrent.TimeUnit; public class CssExpression {    public static void main(String[] args) {   ... Read More

The Google Font is a free font service for computer and web. It launched in the year 2010 and owned by Google. In 2021, open-source icon support was added. It includes 1, 576 font families that includes 352 variable font families. The official website of Google Font is fonts.google.com. Just like the Font Awesome icons, the Google Fonts are added to a website using the element. Let us see how to add and use Google Font on a web page. Features Easily insert Google Fonts on your web page It is having more than 1k font families While ... Read More

We will include a Google Chart to the web page using the google.charts.load(). The draw() method is used to draw the chart. To display, use the BarChart class. First, the chart data is configured. The data of the chart is in a table. Configure the Chart Data Let us first create a function of the chart data. Configure the data to be displayed on the chart. DataTable is a special table structured collection which contains the data of the chart. function drawChart() { var data = google.visualization.arrayToDataTable([ ["Year", "India"], ["2019", 500], ... Read More

A blog layout consists of a header. That header consists of a logo, then the menu, and after that the blog heading, content, etc. With that, the link for some other blogs can also be seen. In the bottom, you have a footer. The footer should have a copyright text. Let us see how to create a blog layout. Create the header The header of a blog consists of a logo on the left and then the website name − Logo ↶ Website Name Position the header Here, we will ... Read More

The zig zag layout would have an image, then text. Next, text, and then image, and it goes on. The responsive zig zag would arrange the text and image according depending on the device, desktop, tablet or mobile. The column will appear on top each other on a smaller device like a mobile. Let us see how to create a responsive zig zag layout with HTML and CSS. Set a container for text We have set a container for text and the class name is given width66. One of them is shown below. The text will take 66% of the ... Read More

To create a mixed column layout grid with CSS, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    * {       box-sizing: border-box;    }    .col {       color: white;       float: left;       width: 25%;       padding: 10px;    }    .colContainer:after {       content: "";       display: table;       clear: both;    }    @media screen and (max-width: 900px) {       .col {          width: 50%;       }    }    @media screen and (max-width: 600px) {       .col {          width: 100%;       }    } Mixed col Layout Example Resize the screen to see the below divs resize themselves First col Second col Third col Fourth col OutputThe above code will produce the following output −On resizing the screen the 4 column layout will turn 2 column and so on −

To create a list grid view, the code is as follows −Example Live Demo    * {       box-sizing: border-box;    }    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    /* Create two equal columns that floats next to each other */    .column {       float: left;       width: 50%;       padding: 10px;       color: white;    }    /* Clear floats after the columns */    .row:after {       content: "";       display: table; ... Read More

An expanding grid is a grid that expands when a box is clicked. It hides by default but gets expanded to 100% when the box is clicked once. We will create three equal columns that floats right next to each other. On clicking any of the grid column, the grid will expand. Also, the expanded area will have a closeable button to close and return to the initial stage. Create a container for the three columns Begin with a parent div with three columns. On clicking any of the boxes, the onclick attribute will open the individual tabs − ... Read More