图片展示
![]()
flexbox布局搜索框问题1.gif
flexbox布局搜索框问题1.gif
问题一：如何去掉搜索框自带的边框线：
input, button {
border: none;
outline: none;
}
html：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>商品列表界面</title>
<link rel="stylesheet" href="../assets/css/main.css?v=0.0.7">
<link rel="stylesheet" href="../assets/plugs/swiper/swiper-3.4.2.min.css?v=0.0.7">
<link rel="stylesheet" href="list.css">
<link rel="stylesheet" href="search.css">
<style>
/*input, button {
border: none;
outline: none;
}*/
.bar7 {background: #F7F7F7;}
.bar7 form {
height: 42px;
}
.bar7 input {
width: 315px;
height: 30px;
line-height: 32px;
margin-left: 15px;
border-radius: 42px;
border: 1px solid #CCCCCC;
background: #F7F7F7;
padding-left: 10px;
/*transition: .3s linear;*/
}
/*.bar7 input:focus {
width: 300px;
}*/
/* .bar7 button {
background: none;
top: -2px;
right: 0;
}
.bar7 button:before{
content: "\f002";
color: #324b4e;
}*/
</style>
</head>
<body style="background-color: #fff;">
<header class="tl-navtop">
<img src="../assets/img/left1.png" alt="返回" class="tl-img135 tl-back">
<div class="search bar7">
<input type="text" placeholder="请输入您要搜索的内容...">
</div>
</header>
<!--下拉展示搜索条件区域-->
<!-- screening -->
<div class="screening">
<ul>
<li class="meishi">品种</li>
<li class="Regional">价格</li>
<li class="Sort">成都</li>
<li class="Brand">筛选</li>
</ul>
</div>
<!-- End screening -->
<!-- grade -->
<div class="meishi22">
<ul class="meishia-w" id="meishia">
<li onclick="meishia(this)"><div class="meishi1">全部犬种 </div></li>
<li onclick="meishia(this)"><div class="meishi1">阿拉斯加雪橇犬 </div></li>
<li onclick="meishia(this)"><div class="meishi1">伯恩山犬 </div></li>
<li onclick="meishia(this)"><div class="meishi1">边境牧羊犬 </div></li>
<li onclick="meishia(this)"><div class="meishi1">博美犬 </div></li>
<li onclick="meishia(this)"><div class="meishi1">巴哥犬 </div></li>
<li onclick="meishia(this)"><div class="meishi1">比熊犬 </div></li>
<li onclick="meishia(this)"><div class="meishi1">柴犬 </div></li>
<li onclick="meishia(this)"><div class="meishi1">德国牧羊犬 </div></li>
</ul>
</div>
<div class="grade-eject">
<ul class="grade-w" id="gradew">
<li onclick="grade1(this)">哈尔滨 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">哈尔滨 <span class="xiaobiao">1225></span></li>
</ul>
</div>
<!-- End grade -->
<!-- Category -->
<div class="Sort-eject Sort-height">
<ul class="Sort-Sort" id="Sort-Sort">
<li onclick="Sorts(this)">智能排序</li>
<li onclick="Sorts(this)">离我最近</li>
<li onclick="Sorts(this)">好评优先</li>
<li onclick="Sorts(this)">人气优先</li>
<li onclick="Sorts(this)">价格最低</li>
<li onclick="Sorts(this)">价格最高</li>
</ul>
</div>
<!-- End Category -->
<!-- Category -->
<script src="js/truck.23648f77.js"></script>
<div class="Category-eject">
<ul class="Category-w" id="Categorytw">
<li onclick="Categorytw(this)">
优惠买单
<span><div class="wrap">
<input type="checkbox" id="s5">
<label class="slider-v3" for="s5"></label>
</div></span>
</li>
<li onclick="Categorytw(this)">
只看免预约
<span><div class="wrap">
<input type="checkbox" id="s6">
<label class="slider-v3" for="s6"></label>
</div></span>
</li>
<li onclick="Categorytw(this)">
节假日可用
<span><div class="wrap">
<input type="checkbox" id="s7">
<label class="slider-v3" for="s7"></label>
</div></span>
</li>
<li onclick="Categorytw(this)">用餐人数</li>
<li onclick="Categorytw(this)">
<div class="choose" id="dress-size">
<form action="" method="get">
<div class="choosebox">
<ul class="clearfix">
<li>
<input type="radio" name="name" value="S" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">不限</span></a>
</li>
<li>
<input type="radio" name="name" value="M" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">单人餐</span></a>
</li>
<li>
<input type="radio" name="name" value="L" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">双人餐</span></a>
</li>
<li>
<input type="radio" name="name" value="XL" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">3~4人餐</span></a>
</li>
<li>
<input type="radio" name="name" value="XXL" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">5~10人餐</span></a>
</li>
<li>
<input type="radio" name="name" value="XXL" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">10人以上</span></a>
</li>
<li>
<input type="radio" name="name" value="XXL" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">其它</span></a>
</li>
</ul>
</div>
<div style="margin-top:100px;"><button type="submit" class="btn-img"><span>完成</span></button></div>
</form>
</div>
</li>
<li onclick="Categorytw(this)"></li>
<li onclick="Categorytw(this)"></li>
</ul>
</div>
<!--商品列表展示区域-->
<div class="tl-container" style="padding-top: 44px">
<div class="tl-look tl-p-top15">
<div style="line-height: 60px; height: 60px;">
<p class="tl-title5 tl-font-14-b">
看了又看
</p>
</div>
<div class="tl-content2 border-b-10">
<div class="tl-flex" style="width:111px;height:85px;align-items: center;margin:0 auto;">
<img src="../assets/img/cat1.png" alt="">
</div>
<div class="tl-flex2" style="width:150px;height:85px;margin-left: 12px">
<div class="tl-font-16-b">英国短毛猫 公</div>
<div class="tl-font-14-5 tl-gray">3个月8天 | 2针</div>
<div class="tl-font-12-5">批发价:￥2000 </div>
</div>
<div class="tl-flex2" style="flex:1;height:85px;">
<!--<img src="../assets/img/protect.png" alt="" class="tl-img-15" style="margin:auto auto;">-->
<div class="tl-font-14-5 tl-gray img-r" >质保20天</div>
</div>
</div>
<!--<div class="tl-line1"></div>-->
<div class="tl-content2 border-b-10">
<div class="tl-flex" style="width:111px;height:85px;align-items: center;margin:0 auto;">
<img src="../assets/img/cat1.png" alt="">
</div>
<div class="tl-flex2" style="width:150px;height:85px;margin-left: 12px">
<div class="tl-font-16-b">英国短毛猫 公</div>
<div class="tl-font-14-5 tl-gray">3个月8天 | 2针</div>
<div class="tl-font-12-5">批发价:￥2000 </div>
</div>
<div class="tl-flex2" style="flex:1;height:85px;">
<div class="tl-font-12-5 tl-gray img-r">质保20天</div>
</div>
</div>
</div>
</div>
<div>
</div>
<!--<ul class="index_product js-product clearfix"></ul>-->
<!-- 菜单按钮 -->
</body>
<script src="list.js"></script>
<script type="text/javascript">
$(function(){
$('.choosebox li a').click(function(){
var thisToggle = $(this).is('.size_radioToggle') ? $(this) : $(this).prev();
var checkBox = thisToggle.prev();
checkBox.trigger('click');
$('.size_radioToggle').removeClass('current');
thisToggle.addClass('current');
return false;
});
});
$(".choosebox li a").click(function(){
var text = $(this).html();
$(".choosetext span").html(text);
$("#result").html("" + getSelectedValue("dress-size"));
});
function getSelectedValue(id){
return
$("#" + id).find(".choosetext span.value").html();
}
</script>
</html>
