Created
May 30, 2024 17:02
-
-
Save burgil/df58d36cd228caf310a923e55f914599 to your computer and use it in GitHub Desktop.
Selectable OL/LI Numbered list (User select for numbered lists in HTML)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<style> | |
ol { | |
list-style: none; /* Remove the default unselectable numbers */ | |
padding-left: 0; /* Remove the default left padding */ | |
} | |
ol li { | |
padding-left: 2em; /* Add custom padding to each item */ | |
position: relative; /* Make the custom selectable numbers position relative to each row */ | |
} | |
ol li il { | |
position: absolute; /* Make the custom selectable numbers position relative to each row */ | |
left: 0; /* Put the selectable numbers at the left of the text */ | |
white-space: nowrap; /* prevent the numbers and the subsequent text from breaking into multiple lines */ | |
width: 1.5em; /* play around with the custom selectable number position if you want */ | |
text-align: right; /* play around with the custom selectable number position if you want */ | |
margin-right: 0.5em; /* play around with the custom selectable number position if you want */ | |
} | |
</style> | |
<script defer> | |
// Override all OL in the page with a custom element (can also be replaced with a span and a class name) | |
document.addEventListener('DOMContentLoaded', () => { | |
const ol = document.querySelectorAll('ol li'); | |
ol.forEach((li, i) => { | |
const il = document.createElement('il'); | |
il.innerHTML = `${i + 1}. `; // Add an extra space to fix the missing space in the pasted text | |
li.insertBefore(il, li.firstChild); // Incase you have more elements | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<ol> | |
<li>some content</li> | |
<li>longer content longer content longer content longer content</li> | |
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, | |
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum | |
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium | |
optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis | |
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam | |
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, | |
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, | |
quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos | |
sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam | |
recusandae alias error harum maxime adipisci amet laborum. Perspiciatis | |
minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit | |
quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur | |
fugiat, temporibus enim commodi iusto libero magni deleniti quod quam | |
consequuntur! Commodi minima excepturi repudiandae velit hic maxime | |
doloremque. Quaerat provident commodi consectetur veniam similique ad | |
earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo | |
fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore | |
suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium | |
modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam | |
totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam | |
quasi aliquam eligendi, placeat qui corporis!</li> | |
<li>Hello <span style="background: green;">☮</span> World!</li> | |
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam recusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maxime doloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam quasi aliquam eligendi, placeat qui corporis!</li> | |
<li>il six</li> | |
<li>il seven</li> | |
</ol> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add support for UL dots: