.caidan { /*height: 100%;*/ position: absolute; overflow-x: hidden; transition: 0.5s; background: rgba(165, 165, 165, 0.7); z-index: 999999; right: 0; top: 0; width:0; } .ul_bg { width: 100%; background: rgb(255, 255, 255); height: 100%; float: right; font-size: 14px; /*font-weight: bold;*/ margin: 0; padding: 0; list-style: none; position: relative; } .ul_bg ul { background: rgb(255, 255, 255); padding: 0 0 0 5%; } .caidan .sousuo{ height: 50px; width: 0%; line-height: 50px; text-align: left; overflow-x: hidden; transition: 0.5s; z-index: 999999; right: 0; top: 0; position: fixed; background: #ffffff; } .caidan .sousuo .close:before{ content: "\2715"; margin-right: 15px; font-size: 25px; float: right; } .caidan i{ position: absolute; background-image: url(../image/search.png); background-size: 14px 14px; background-repeat: no-repeat; background-position: 10px 18px; width: 30px; height: 50px; } .caidan .sousuo input{ border: 0; height: 35px; padding-left: 30px; font-size:15px; outline: none; width: 100%; } .caidan .sousuo input::-webkit-input-placeholder { color: #A9A9A9; } .caidan .sousuo input::-moz-placeholder { color: #A9A9A9; } /* firefox 19+ */ .caidan .sousuo input:-ms-input-placeholder { color: #A9A9A9; } /* ie */ .caidan .sousuo input:-moz-placeholder { color: #A9A9A9; } .ul_bg .other { height:50px; line-height:50px; background: #ECECEC; width: 100%; border-bottom: 1px solid #ECECEC; } .ul_bg .other span { display: inline; font-size: 16px; } .ul_bg .other img { height: 15px; width: 15px; display: inline; margin: 12px 0px 0 5%; } .ul_bg .other:before { content: ""; width: 7px; height: 7px; border: solid #000000; border-width: 0 2px 2px 0; float: right; margin: 20px 20px 0 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .ul_bg #fenlei { background-color: #f7f7f7; border-bottom: 1px solid #ECECEC; } .ul_bg #fenlei:before { content: ""; width: 7px; height: 7px; border: solid #000000; border-width: 0 0 2px 2px; float: right; margin: 20px 20px 0 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .ul_bg #fenlei:first-child:before { border: solid #f7f7f7; } .ul_bg #fenlei.selected:before { content: ""; width: 7px; height: 7px; border: solid #000000; border-width: 2px 2px 0 0; float: right; margin: 20px 20px 0 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .ul_bg #fenlei.selected:before { border: solid #f7f7f7; } .ul_bg li span { display: block; line-height:50px; margin: 0 0 0 5%; } /*.ul_bg li span:before{ content: ""; width: 13px; height: 13px; border: solid #000000; border-width: 0 2px 2px 0; float: right; margin: 12px 20px 0 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }*/ .ul_bg li div { text-align: left; } .ul_bg ul li { line-height:50px; height:50px; color: #696969; border-bottom: 1px solid #ECECEC; font-size: 14px; list-style-type:none; } .ul_bg ul li a { color: #696969; font-weight: normal; text-decoration: none; display: block; } .ul_bg ul li a:active { color: #34528B; } .ul_bg li div { /* 瀛愯彍鍗曞钩鏃朵笉鏄剧ず */ display: none; } /*.ul_bg li.selected div { 娣诲姞浜唖elected鏍峰紡鏃舵墠鏄剧ず text-align: left; display: block; }*/ .bg-container { max-width: 640px; min-width: 320px; padding-left: 0; padding-right: 0; -webkit-box-sizing: border-box; box-sizing: border-box; margin-left: auto; margin-right: auto; width: 100%; position: relative; }