<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 plug-in uses:
Head Introduction CSS File
<link rel= "stylesheet" href= "Https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.css" >
Introduction of CDN at body end
<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" > second page </div>
<div class= "section" > Third page </div>
<div class= "section" > Fourth page </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 '],
});
})
A nice-looking input style