HTML DOM Select Name Property

Sharon Christine
Updated on 01-Jul-2020 09:26:51

174 Views

The HTML DOM select name property returns and modify the value of the name attribute of the drop-down list in an HTML document.Following is the syntax −Returning nameobject.nameModifying nameobject.name = “text”ExampleLet us see an example of HTML DOM select name property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.2rem;    }    .drop-down{       width:35%;   ... Read More

HTML DOM Select Value Property

Sharon Christine
Updated on 01-Jul-2020 09:24:03

267 Views

The HTML DOM select value property returns and modify the content of the value attribute of a drop-down list.SyntaxFollowing is the syntax −Returning valueobject.valueModifying valueobject.value = true | falseExampleLet us see an example of HTML DOM select value property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.1rem;    }    .drop-down{       width:35%;       ... Read More

HTML DOM Select Size Property

karthikeya Boyini
Updated on 01-Jul-2020 09:22:05

115 Views

The HTML DOM select size property returns and modify the value of the size attribute of a drop-down list.SyntaxFollowing is the syntax −Returning sizeobject.sizeModifying valueobject.size = “number”ExampleLet us see an example of HTML DOM select size property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.1rem;    } ... Read More

Role of CSS Valid Selector

Chandu yadav
Updated on 01-Jul-2020 09:20:32

192 Views

Use the CSS : valid selector to style all elements with a valid value .ExampleYou can try to run the following code to implement the :valid SelectorLive Demo                    input:valid {             background: red;             color: white;          }                     Heading             The style (red color background) appears if you type a relevant/ valid email address.    

Highlight Active HTML Anchor with CSS

Prabhas
Updated on 01-Jul-2020 09:20:09

3K+ Views

To highlight active HTML anchor with CSS, use the :target selector.ExampleYou can try to run the following code to implement the :target Selector:Live Demo                    :target {             border: 2px solid #D4D4D4;             background-color: orange;             color: white;          }                     Click any of the subject below.       Maths       Java       C++       C       This is demo text.       This is demo text.       This is demo text.       This is demo text.       This is demo text.       Maths Tutorial       Java Tutorial       C++ Tutorial       C Tutorial    

Style Every Element That Is Not the Specified Element with CSS

varma
Updated on 01-Jul-2020 09:19:46

142 Views

To style every element that is not the specified element, use the CSS :not(selector) selector.ExampleYou can try to run the following code to implement the :not selector:Live Demo                    p {             color: red;          }          :not(p) {             color: blue;          }                     Heading 1       Heading 2       Heading 3       This is a paragraph.       This is another paragraph.    

HTML DOM Input Number Required Property

karthikeya Boyini
Updated on 01-Jul-2020 09:19:27

142 Views

The HTML DOM input number required property returns and modify whether the input number field must be filled out before submitting the form.SyntaxFollowing is the syntax −Returning requiredobject.requiredModifying requiredobject.required = true | falseExampleLet us see an example of HTML DOM input number required property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.1rem;    }    input{     ... Read More

Role of CSS Target Selector

Arjun Thakur
Updated on 01-Jul-2020 09:19:09

276 Views

Use the CSS :target selector to highlight active HTML anchor with CSS.ExampleYou can try to run the following code to implement the :target SelectorLive Demo                    :target {             border: 2px solid #D4D4D4;             background-color: orange;             color: white;          }                     Click any of the subject below.       Maths       Java       C++       C       This is demo text.       This is demo text.       This is demo text.       This is demo text.       This is demo text.       Maths Tutorial       Java Tutorial       C++ Tutorial       C Tutorial    

Style the Document's Root Element with CSS

Ankith Reddy
Updated on 01-Jul-2020 09:18:45

105 Views

To style document’s root element, use the CSS: root selector.ExampleYou can try to run the following code to implement the: root SelectorLive Demo                    :root {             background: blue;             color: white;          }                     Heading       This is demo text.    

CSS Position Sticky

Arjun Thakur
Updated on 01-Jul-2020 09:17:53

419 Views

The position: sticky; property allows you to position an element based on scroll position. Set an element as sticky on the top when a user scrolls down.ExampleYou can try to run the following code to implement CSS position: sticky;Live Demo                    div.sticky {             position: -webkit-sticky;             position: sticky;             top: 0;             padding: 10px;             background-color: orange;             border: 1px solid blue;          }                     Scroll and see the effect!       Sticky!                This is demo text.          Scroll down to view the sticky div.          

Advertisements