将单选框的redio样式改编成长方形
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>加入购物车</title>
<style>
body{
text-align:center;
}
span {
display: inline-block;
width: 100px;
height: 50px;
border: 1px solid grey;
vertical-align: middle;
}
:checked+span {
background-color: grey;
}
input[type=radio] {
display: none;
}
.queding {
width: 200px;
height: 20px;
}
</style>
</head>
<body>
<form action="ShopCartServlet" method="post">
<input type="hidden" name="op" value="insert">
<!-- user_id此处有bug用户无需选择id -->
用户id:<br>
<label><input name="user_id" type="radio" value="1" /><span>1</span></label>
<label><input name="user_id" type="radio" value="2" /><span>2</span></label>
<label><input name="user_id" type="radio" value="3" /><span>3</span></label>
<label><input name="user_id" type="radio" value="4" /><span>4</span></label><br>
商品id:<br>
<label><input name="good_id" type="radio" value="1"/><span>1</span></label>
<label><input name="good_id" type="radio" value="2"/><span>2</span></label>
<label><input name="good_id" type="radio" value="3"/><span>3</span></label>
<label><input name="good_id" type="radio" value="4"/><span>4</span></label><br>
商品数量:<br>
<label><input name="quantity" type="radio" value="1"/><span>1</span></label>
<label><input name="quantity" type="radio" value="2"/><span>2</span></label>
<label><input name="quantity" type="radio" value="3"/><span>3</span></label>
<label><input name="quantity" type="radio" value="4"/><span>4</span></label><br>
商品价格:<br>
<label><input name="price" type="radio" value="4"><span>4¥</span></label><br>
<input class="queding" type="submit" value="确定">
</form>
</body>
</html>
结果