html选择框修改样式

最新推荐文章于 2023-12-13 14:25:44 发布

呆痞ys

最新推荐文章于 2023-12-13 14:25:44 发布

阅读量1k

点赞数

分类专栏： java前端

本文链接：https://blog.csdn.net/qq_45232054/article/details/103623895

版权

java前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

将单选框的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>

结果
在这里插入图片描述

呆痞ys

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html选择框修改样式

将单选框的redio样式改编成长方形<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><tit...
复制链接

扫一扫

专栏目录