CSS Articles - Page 122 of 160

To style the options in , you can try to run the following code,ExampleLive Demo                    select {             width: 100%;             padding: 10px 15px;             border: 1px dashed blue;             border-radius: 4px;             background-color: orange;          }                     Learn,                             Java             Ruby             Oracle             Tableau                    

To set border to form inputs, use the CSS border property.You can try to run the following code to add borderExampleLive Demo                    input[type = text] {             width: 100%;             padding: 10px 15px;             margin: 5px 0;             box-sizing: border-box;             border: 3px inset orange;          }                     Fill the below form,                Subject                    Student                    

To style the input field of a form, you can try to run the following code. Style the :ExampleLive Demo                    input {             width: 100%;          }                     Fill the below form,                Subject                    Student                    

To add space inside a form’s text field, use the CSS padding property.You can try to run the following code to achieve this:ExampleLive Demo                    input[type = text] {             width: 100%;             padding: 10px 15px;             margin: 5px 0;             box-sizing: border-box;          }                     Fill the below form,                Subject                    Student                    

Use the [attribute = ”value”] selector to select elements with a specified attribute and value.You can try to run the following code to implement the CSS [attribute="value"] Selector. Here, we have considered the attribute as rel,ExampleLive Demo                    a[rel = nofollow] {             border: 3px solid blue;          }                     Uber's Business Model       Share          Market    

To set the elements to retain the style values set by the last keyframe, use the animation-fill-mode property with the backwards value.ExampleLive Demo                    div {             width: 150px;             height: 200px;             position: relative;             background: red;             animation-name: myanim;             animation-duration: 2s;             animation-fill-mode: backwards;          }          @keyframes myanim {             from {left: 0px; background-color: green;}             to {left: 200px; background-color: blue;}          }                        

To set bottom tooltip, use the top CSS property.You can try to run the following code to set bottom tooltip to a text:ExampleLive demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: orange;          color: white;          z-index: 1;          top: 100%;          left: 60%;          margin-left: -90px;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;          margin-top: 50px;       }       .mytooltip:hover .mytext {          visibility: visible;       }               Keep mouse cursor over me           My Tooltip text          

Use the [attribute| = ”value”] selector to select elements with the specified attribute starting with a specified value.You can try to run the following code to implement CSS [attribute| = ”value”] Selector,ExampleLive Demo                    [alt |= Tutor] {             border: 5px solid orange;             border-radius: 5px;          }                              

Use the [attribute] selector to select elements with an attribute, for example, an alt attribute or a target attribute, etc.You can try to run the following code to implement the CSS[attribute] selector,ExampleLive Demo                    img[alt] {             border: 3px solid orange;          }                              

To set left tooltip, use the right CSS property.You can try to run the following code to set left tooltip to a text:ExampleLive Demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: orange;          color: white;          z-index: 1;          top: -6px;          right: 100%;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;          margin-left: 150px;       }       .mytooltip:hover .mytext {          visibility: visible;       }               Keep mouse cursor over me           My Tooltip text