Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Oct 18, 2019
Embed
What would you like to do?
Roman Pagination
<div class="roman-pagination">
<label class="roman-radio">
<input type="radio" name="radioName" checked>
<span class="numeral">I.</span>
<span class="title">The First</span>
</label>
<label class="roman-radio">
<input type="radio" name="radioName">
<span class="numeral">II.</span>
<span class="title">The Second</span>
</label>
<label class="roman-radio">
<input type="radio" name="radioName">
<span class="numeral">III.</span>
<span class="title">The Third</span>
</label>
<label class="roman-radio">
<input type="radio" name="radioName">
<span class="numeral">IV.</span>
<span class="title">The Fourth</span>
</label>
<label class="roman-radio">
<input type="radio" name="radioName">
<span class="numeral">V.</span>
<span class="title">The Fifth</span>
</label>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.roman-pagination {
width: 400px;
height: 300px;
background-color: #F1F1F1;
display: flex;
justify-content: center;
align-items: center;
}
.roman-radio {
margin: 0 8px;
}
input[type="radio"] { display: none; }
input[type="radio"]:checked ~ span { color: red; }
input[type="radio"]:checked ~ .title { display: inline; margin-left: 0; }
.numeral {
}
.title {
display: none;
margin-left: -16px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.