| 12345678910111213141516171819202122232425262728293031323334353637 |
- <style>
- .customized-count__color-box {
- --hue: 56;
- width: 20px;
- height: 20px;
- background-color: hsl( var( --hue ), 100%, 50% );
- display: inline-block;
- vertical-align: middle;
- border-radius: 100%;
- }
- .customized-count > div {
- margin-left: 1em;
- }
- .customized-count span {
- min-width: 90px;
- display: inline-block;
- }
- </style>
- <div id="demo-editor-update">
- <p>Tourists frequently admit that <a href="https://en.wikipedia.org/wiki/Taj_Mahal">Taj Mahal</a> “simply cannot be described with words”.</p>
- </div>
- <div class="word-count customized-count">
- <div class="customized-count__words">
- <label>
- <span>Words:</span>
- <progress value="12" max="20"></progress>
- </label>
- </div>
- <div class="customized-count__characters">
- <span>Characters:</span>
- <div class="customized-count__color-box"></div>
- </div>
- </div>
|