Skip to main content

Input Range with CSS

 


Use ::in-range and ::out-of-range pseudo-classes to style input depending on input value.

DEMO

HTML

<label>1 to 10 are valid.</label>
<input type="number" value="1" min="1" max="10">

CSS

input:in-range {
  background-color: limegreen;
}
input:out-of-range {
  background-color: orange;
}
Labels:

Comments

Post a Comment

Popular posts from this blog

Create Vertical Text - CSS

From the old internet, the direction of text is pretty much fixed on left-to-right. In modern CSS has addressed the issue and supports vertical text with ease. Right to Left Vertical Text Right to Left Vertical Text HTML <div class= "v-rl" > <p> Right to Left </p> <p> Vertical Text </p> </div> CSS .v-rl { writing - mode : vertical - rl; } Left to Right Vertical Text Left to Right Vertical Text HTML <div class= "v-lr" > <p> Left to Right </p> <p> Vertical Text </p> </div> CSS .v-lr { writing - mode : vertical - lr; } All Characters Upright All Characters Upright Ultraman ウルトラマン HTML <div class= "t-upright" > <p> All Characters </p> <p> Upright </p> <p> Ultraman ウルトラマン </p> </div> CSS .t-upright { writing - mode : vertical - rl; text - orie...
Post a Comment
Read more

Introduction

Hello world,  UIUX Component  is for those who newbie in HTML, CSS and JavaScript for their new career as Web Designer, Web Developer, Web Editor etc. We try our best to make sure we update the code which applicable for your daily routine in web development or maybe some for Apps content.  To utilise this site you should have basic knowledge on HTML, CSS and JavaScript. If you still not sure what we talking about, we have a few suggestion on where you should to start your knowledge. What is HTML HTML stands for Hyper Text Markup Language, the standard markup language for creating Web pages. Describes the structure of a Web page, consists of a series of elements which elements tell the browser how to display the content also elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. HTML Tutorial What is CSS CSS stands for Cascading Style Sheets, describes how HTML elements are to be displayed on screen, pape...
Post a Comment
Read more

Element Center and Middle - CSS

Make the element center and middle within the specific element width and height is easy using flex. This box centered! HTML   < div class = "box-center" > < strong > This box centered ! </ strong > < div > CSS . box - center { background - color: red; width: 100 % ; height: 200 px; display: flex; align - items: center; justify - content:center; } . box - center strong { background - color: limegreen; padding: 0.5 em; }
Post a Comment
Read more