首页 > 代码库 > 一个好看的Input样式

一个好看的Input样式

<div class="search">
<input type="text">
</div>

.search{
text-align: center;
}
.search input{
margin: 0 auto;
padding: 0 10px;
width: 536px;
height: 34px;
border: 1px solid rgba(255,255,255,.8);
border-radius: 2px;
color: #fff;
background: rgba(0,0,0,.15);
  //font-family: "helvetica neue",arial,sans-serif;
}

fullPage插件使用:
head引入css文件
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.css">

在body最后引入cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/vendors/jquery.easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
<div id="fullpage">
<div class="section">
<div>
<div class="search">
<input type="text">
</div>
</div>
</div>
<div class="section">第二页</div>
<div class="section">第三页</div>
<div class="section">第四页</div>
</div>
$(document).ready(function(){
$(‘#fullpage‘).fullpage({
sectionsColor:[‘green‘,‘blue‘,‘gray‘,‘yellow‘],
controlArrows:false,
scrollingSpeed:2000,
anchors:[‘page1‘,‘page2‘,‘page3‘,‘page4‘],
loopTop:true,
loopBottom:true,
loopHorizontal:false,
scrollBar:true,
continuousVertical:true,
menu:‘#menu‘,
navigation:true,
navigationTooltips:[‘aaa‘,‘bbb‘,‘ccc‘,‘ddd‘],

});
})


一个好看的Input样式