Style radio buttons without icons
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upsetter – Modern Font Subsetting</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<style>
</style>
</head>
<body>
<div id="app">
<div id="right">
first
</div>
<div id="left">
second
</div>
<div id="center">
<div id="target-settings">
<div id="target-settings-ui" style="height: 2000px;">
</div>
<div class="widget">
<fieldset>
<label for="feature_${feature}_keep">Keep</label>
<input type="radio" feature="${feature}" part="opentypefeature" name="feature_${feature}"
id="feature_${feature}_keep" value="keep">
<label for="feature_${feature}_freeze">Freeze</label>
<input type="radio" feature="${feature}" part="opentypefeature" name="feature_${feature}"
id="feature_${feature}_freeze" value="freeze">
<label for="feature_${feature}_drop">Drop</label>
<input type="radio" feature="${feature}" part="opentypefeature" name="feature_${feature}"
id="feature_${feature}_drop" value="drop">
</fieldset>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
/* Ensure html and body are constrained to the viewport */
html,
body {
height: 100%;
margin: 0;
overflow: auto;
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0;
line-height: 1.5;
color: #333;
background-color: #f8f9fa;
/* max-height: 100vh; */
}
#app {
display: inline-flex;
width: 100%;
height: 100vh;
overflow: hidden;
}
#app #left {
width: 20%;
/* Left section takes 20% of the width */
background-color: #f7f7f7;
/* Optional: Add a background color for clarity */
padding: 15px;
}
#app #center {
width: 60%;
background-color: #ffffff;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
}
#app #right {
width: 20%;
/* Right section takes 20% of the width */
background-color: #f0f0f0;
/* Optional: Add a background color for clarity */
padding: 15px;
}
JavaScript
$(document).ready(function () {
$(".widget input[type='radio']").checkboxradio({
icon: false
});
});