mui 折叠面板accordion 并行排列的实现

效果图如下:

mui 折叠面板accordion 并行排列的实现_第1张图片mui 折叠面板accordion 并行排列的实现_第2张图片mui 折叠面板accordion 并行排列的实现_第3张图片

css:

@charset "utf-8";

/*搜索框*/

div.mui-input-row.mui-search {
	margin: 0;
	margin-bottom: -8px;
	background-color: #fff;
	padding: 7px 15px 0 15px;
}

div.mui-input-row span {
	font-size: 12px;
}

input[type='search'] {
	font-size: 14px;
	font-family: "苹方", "微软雅黑";
	color: #333;
	border-radius: 5px;
	box-shadow: inset 0px 1px 6px 0px #d5d4d4;
	background-color: #FFF;
	border: 1px solid #ddd;
}

.mui-search .mui-placeholder {
	top: 5px;
	left: 20px;
}

div.mui-input-row.mui-search.mui-active::before {
	top: 32px;
	padding-left: 18px;
}

.mui-input-row:after {
	height: 0;
}


/*折叠面板*/

li.mui-table-view-cell {
	position: static;
}

.mui-table-view-cell>a:not(.mui-btn) {
	margin: 0;
}

a.mui-navigate-right {
	height: 44px;
	background-color: #fff;
	line-height: 44px;
	text-align: center;
	font-size: 14px;
	border: 1px solid #ddd;
	border-left: 0;
}

.mui-table-view-cell.mui-collapse.mui-active {
	margin-top: 0px;
}

.mui-navigate-right:after,
.mui-push-left:after,
.mui-push-right:after {
	font-size: 22px;
	font-weight: 800;
	color: #333;
}

.mui-navigate-right:after,
.mui-push-right:after {
	right: 18%;
}

.padding-left-15px {
	padding-left: 15px;
}

div.mui-table-view-cell {
	padding: 3px 15px;
}

li.mui-table-view-cell:nth-child(1):after {
	height: 0;
}


/*复选框样式更改*/

.mui-radio input[type='radio']:before {
	content: '';
	/* 更改未选中的样式*/
	
}

.mui-radio input[type='radio']:checked:before {
	content: '\e472';
	/* 更改选中的样式*/
	font-size: 40px;
}

.mui-mui-radio input[type='radio'] {
	top: 0;
}

.mui-input-row label {
	font-family: "苹方", "微软雅黑";
}

 html:




	
		
		
		
		
		
		

		
			
返回

车位查询

 

你可能感兴趣的:(mui,html,/,html5)