body { padding: 0; margin: 0; font-family: "microsoft yahei", "segoe ui", "lucida grande", helvetica, arial, sans-serif; font-size: 14px; color: #333; } .containersousuo { width: 318px; float: right; margin-top: 20px; } .containersousuo:after { content: ''; display: block; clear: both; } .containersousuo > div { float: left; } .containersousuo .logo { position: relative; width: 263px; height: 44px; border-top: #ccc solid 1px; border-right: none; border-bottom: #ccc solid 1px; border-left: #ccc solid 1px; border-radius: 4px 0 0 4px; } .containersousuo .input { position: relative; width: 264px; height: 36px; border-top: #ccc solid 1px; border-right: none; border-bottom: #ccc solid 1px; border-left: #ccc solid 1px; border-radius: 4px 0 0 4px; } .containersousuo .input > input { outline: none; border: none; margin: 0; height: 36px; width: 259px; color: #333; font-size: 16px; border-radius: 4px 0 0 4px; } .containersousuo .input > input::-webkit-input-placeholder { color: #999; } .containersousuo .input .picker { width: 40px; padding-right: 30px; position: absolute; top: 0; right: 0; height: 100%; line-height: 38px; cursor: pointer; color: #999; font-size: 12px; text-align: right; background-position: 50px center; background-repeat: no-repeat; user-select: none; } .containersousuo .input .picker-list { list-style: none; padding: 5px 0; width: 100px; position: absolute; right: 0; top: 50px; margin: 0; line-height: 26px; font-size: 12px; border-radius: 2px; box-shadow: 0 1px 5px rgba(0,0,0,.2); background-color: #fff; display: none; z-index: 9; } .containersousuo .input .picker-list > li { padding-left: 36px; background-position: 10px center; background-repeat: no-repeat; background-size: 16px auto; } .containersousuo .input .picker-list > li:hover { background-color: #ebf1f5; cursor: pointer; } .containersousuo .input .hot-list { padding: 10px 0; width: 100%; position: absolute; left: 0; top: 50px; margin: 0; line-height: 32px; font-size: 14px; border-radius: 2px; box-shadow: 0 1px 5px rgba(0,0,0,.2); background-color: #fff; display: none; z-index: 9; } .containersousuo .input .hot-list > a { display: block; color: #333; text-decoration: none; padding: 0 10px; overflow: hidden; } .containersousuo .input .hot-list > a:hover { background-color: #f3f3f3; } .containersousuo .input .hot-list > a > div { float: left; } .containersousuo .input .hot-list > a > div.number { text-align: center; width: 40px; } .containersousuo .search { width: 53px; height: 38px; background-color: #08f; background-position: center; background-repeat: no-repeat; border-radius: 0 4px 4px 0; cursor: pointer; margin-top: 34px; } @media only screen and (max-width:767px) { .containersousuo{ display:none; } }