hybridstart
Version:
A hybrid application development framework
68 lines (64 loc) • 2.68 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<link href="../../../sdk/ui.css" rel="stylesheet">
<style>
.labels{position: relative; overflow:hidden;}
.labels label{margin-right: .5em;}
.labels input{position: absolute; visibility: hidden;}
.labels input:checked + .btn{border-color: #1f9af8;color:#1f9af8;}
.labels .btn-default{border-color:#ccc;}
</style>
</head>
<body class="flex-col">
<div class="head">
<div class="btn" id="goBack">
<i class="ion"></i>
</div>
<div class="title">单选框演示</div>
</div>
<div class="flex-1 flex-col scroll_cont">
<div class="list">
<label class="item item-radio radio-primary">
<input type="radio" name="key">
樱木花道
</label>
<label class="item item-radio radio-success">
<input type="radio" name="key">
流川枫
</label>
<label class="item item-radio radio-warning">
<input type="radio" name="key">
赤木刚宪
</label>
</div>
<div class="list">
<div class="item">
<h2>ABO血型</h2>
<div class="labels">
<label>
<input type="radio" name="bloodType" value="A" datatype="*" nullmsg="请选择ABO血型">
<div class="btn btn-ghost btn-default">A型</div>
</label>
<label>
<input type="radio" name="bloodType" value="B" datatype="*" nullmsg="请选择ABO血型">
<div class="btn btn-ghost btn-default">B型</div>
</label>
<label>
<input type="radio" name="bloodType" value="O" datatype="*" nullmsg="请选择ABO血型">
<div class="btn btn-ghost btn-default">O型</div>
</label>
<label>
<input type="radio" name="bloodType" value="AB" datatype="*" nullmsg="请选择ABO血型">
<div class="btn btn-ghost btn-default">AB型</div>
</label>
</div>
</div>
</div>
</div>
</body>
<script src="../../../sdk/loader.js" data-script="script"> </script>
</html>