Comment box can be created using clip-path propertySyntaxThe syntax of CSS clip-path property is as follows −Selector {    clip-path: /*value*/ }ExampleThe following examples show how we can create a comment box using CSS. Live Demo                    .cb {             position: relative;             padding: 2%;             border-radius: 8%;             width:25%;          }          .cb::after {             content: "";     ... Read More

The ::marker selector is used to select the marker of a list item in CSS. It updates the marker properties on bullets or numbers i.e., unordered or ordered lists. We will use the ::marker selector with the color property to change the bullet color. Syntax The syntax of CSS ::marker selector is as follows − Selector::marker { attribute: /*value*/; } The following examples illustrate CSS ::marker selector. Create a Colored Vertical Bullet List To add a color to the bullet list, set the ::marker selector. The bullet lists get displayed vertically by default. Here, we ... Read More

To style bullets in an unordered list, we can use the list-style property. We will see examples to animate ordered and unordered lists. Syntax The syntax of CSS li-style property as follows − li { list-style: /*value*/ } Style and Animate Unordered List The following example illustrate CSS list-style property to style the list items in an unordered list i.e. . To animate it, we have set styles on hover using the :hover selector − li:hover { box-shadow: -10px 2px 4px 0 blue!important; font-size } Example Let us see an example to style and animate an unordered list on a web page − ... Read More

To set a fixed width for items in flexbox, use the flex property. The flex is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties as shown below. The flex item is growable, can’t shrink, and initial length is set to 100% − flex: 1 0 100%; Above, shows − flex-grow is 1 i.e., growable flex-shrink is 0 i.e., can’t shrink flex-basis is 100% Syntax The syntax of CSS flex property is as follows − Selector { flex: /*value*/ } As shown above, the value can be − flex-grow ... Read More

We use the appearance property to style an element according to the platform-native style of the user’s operating system. 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 */ } The following examples illustrate CSS appearance property − Hide Dropdown Arrow for Input Type Number In this example, we have shown how to hide the dropdown arrow for the . For that, we gave set the appearance property to none − ... Read More

We use the appearance property to style an element according to the platform-native style of the user’s operating system. 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 Custom Radio Button To create a custom custom checkbox, we have set the following style with border-radius and appearance. The appearance is set to none − input[type=radio] { appearance: none; -webkit-appearance: none; ... Read More

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

Given two strings ‘a’ and string ‘b’, we have to check if they are anagrams of each other or not and return True/False. For example, Input-1 −String a= “india” String b= “nidia”Output −TrueExplanation − Since the given string ‘b’ contains all the characters in the string ‘a’ thus we will return True.Input-2 −String a= “hackathon” String b= “achcthoon”Output −FalseExplanation − Since the given string ‘b’ doesn’t have all the characters as string ‘a’ have thus we will return False.The approach used to solve this problemIn the given strings ‘a’ and ‘b’, we will check if they are of the same ... Read More

We are required to write a JavaScript function that takes in an array of Numbers.The function should construct a new array based on the input array.Each corresponding element of the new array should be the number of elements that are smaller in the original array than that corresponding element.For example −If the input array is −const arr = [2, 7, 3, 1, 56, 4, 7, 8];Then the output array should be −const output = [1, 4, 2, 0, 7, 3, 4, 6 ];ExampleFollowing is the code −const arr = [2, 7, 3, 1, 56, 4, 7, 8]; const smallerThanCurrent = ... Read More