How to set the font-size to 12px with no scripts for a length of 5 digits (10,000)?

 body { background: #F0F4F8; } span { width: 32px; height: 16px; line-height: 17px; display: block; background: #64bef0; color: #FFF; text-align: center; border-radius: 2px; padding: 3px; cursor: pointer; } span:before { content: attr(value); font-size: 14px; } 
 <span value='1000' onclick= 'this.setAttribute("value", this.getAttribute("value") == 1000 ? 10000 : 1000)'> </span>

  • I'm afraid that only css does, his work unit is a tag, not a text - Alexey Ten
  • @AlexeyTen, Yeah, Kostylandia - Mr. Black

1 answer 1

It turned out to be done only with the help of input , with a regular expression in the pattern attribute, where the length of the value becomes valid with 5 or more digits.

However, with the attribute disabled or readonly, the pseudo- class : valid does not work.

pointer-events: none; helped pointer-events: none; but cursor: pointer; stopped working cursor: pointer; and if you add an onclick event to input or wrap it in a label , the selection starts working

 function set(value) { document.querySelector('input').value = value; } 
 input { width: 40px; height: 16px; background: #64bef0; color: #FFF; text-align: center; border-radius: 3px; padding: 3px 5px 3px 3px; font-size: 14px; outline: none; border: 0px; pointer-events: none; cursor: pointer; /* ( ◡́.◡̀) */ } input:valid { font-size: 12px; } 
 <input value='10000' pattern='\d{5,}' tabindex='-1'> <br><br> <button onclick='set(1000)'>1000</button> <button onclick='set(10000)'>10000</button>

  • This is a perversion. But you can get to your input from the keyboard, probably - Alexey Ten
  • @AlexeyTen, indeed, got it :( - Mr. Black
  • You can try a negative tabindex set - Alexey Ten
  • @AlexeyTen, exactly, thank you - Mr. Black