关于前端的那些事

去掉textarea的边框(包括点击后)

代码如下:

    地址:
    

修改下拉图标

select {
   /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
   border: solid 1px rgba(220,220,220,1);
   /*很关键：将默认的select选择框样式清除*/
   appearance:none;
   -moz-appearance:none;
   -webkit-appearance:none;
   /*在选择框的最右侧中间显示小箭头图片*/
   background: url("xxx.png") no-repeat scroll  transparent;
   background-position:95% center;
   /*为下拉小箭头留出一点位置，避免被文字覆盖*/
   padding-right: 25px;
}

滚动条下背景图片出现空白

/*给背景图片添加*/
background-size: cover;

回到顶部

/* css */
.div-box{
  width: 100px;
       height: 50px;
       background-color: blue;
       margin-top: 70%;
   }
   .box{
       text-align: center;
       width: 5%;
       position: fixed;
       bottom: 2%;
       right: 2%;
       display: none;
   }
   .box a:hover{
       text-decoration: none;
}
        
/* html */
123

 返回顶部

		
/* js */
$(function () {
      $(window).scroll(function () {
          var scr_len = $(this).scrollTop(); // 滚动条下移距离
          if(scr_len > 20){
              $(".box").fadeIn();
          }else{
              $(".box").fadeOut();
          }
      });
      $(".box").click(function () {
          if($(window).scrollTop() > 0){ // 当有滚动条的情况
              $("html,body").animate({scrollTop:0},1500);
          }
      });
});