手机端制作之select框的使用

今天是克服拖延症的第四天吧，准确来讲今天不是很成功因为今天花了点时间刷了会儿小视频，好啦好啦，话不多说，我们开始吧~
今天分享的主要内容是手机端在不使用框架的前提下，使用原生的select框（哈哈，开个玩笑~）来适应手机端页面。

select框的“初始化”——去掉select框的默认样式

select框在苹果手机端的处理这部分涉及到js呦~

下面我们来一起看看吧~

select框的“初始化”

在手机端做页面的时候，一般不用考虑select中option的显示，因为在手机端，不同型号的手机甚至同一个型号的手机在不同软件中的显示也会有所不同，因此，目前我在作页面的时候是不考虑option内容，也就是下拉菜单栏的样式的，因为不管在哪个环境下，下拉框都是经过美化的，不管它是怎样的一种样式都不用考虑风格统一的问题~
因此，下面我分享的是在不考虑option即下拉菜单的显示样式情况下对select框进行处理~
废话说了这么多，先贴一段代码吧~

   select {
    -webkit-appearance: none;        //去掉浏览器给select框添加的样式
    outline: none;                   //去掉当点击select框的时候select框自带的效果
    border: 0;                       //去掉select框的边框，这边养以来，就可以在后面添加自己喜欢的select框的边框样式
    background-color: transparent;   //去掉select框的背景色，用来更好的适应各种不同风格的页面，在这里将它的背景设置为透明的
   }

以上就是对select框进行“初始化”的代码，我在这里为了方便采用的是css元素的选择器，一般在做页面的时候使用class类名和id名称的多一些，其中在做前端css多使用类名，在做js效果的时候使用id选择器是比较多的，但是也不绝对，还是看功能需要，不过大体上是这样的，select初始化的内容就分享到这里了~

接下来要分享的是一种在不使用前端UI库中select样式的前提下，使得select框中的内容更好的展示在手机屏幕上的一种方法，这样写出的代码在苹果手机上和在普通手机上面的显示效果是一毛一样的，涉及到了js~

先来看一看代码吧，本部分的内容包括三部分即：h5页面 css文件 js文件先来看看html页面吧~

<div class="content">
     <div class="sjh" style="position: relative;">
         <p style="width: 100%; height: 38px; line-height: 38px; color: #fff; text-align: center;" id="sfysb">你好吗</p>
         <select class="block-item" onchange="shebei(this)" style=" position: relative; top: -38px; left: 0;box-sizing: border-box;width: 100%;height: 100%;background-color: transparent; z-index: 2;color: transparent;"> 
             <option selected="" value="你好吗">你好吗</option>
             <option value="我很好">我很好</option> 
             <option value="我不太好">我不太好</option>
         </select>
     </div>
 </div>

接下来是css样式~

.content {
   width: 66vw;
    font-size: 15px;
    margin: 0 auto;
    background-color: pink;
}
.sjh {
    position: relative;
    width: 100%;
    height: 38px;
    color: #fff;
    font-size: 15px;
    line-height: 38px;
    text-align: center;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 22px;
    margin: 20px 0;
}
.block-item {
    -webkit-appearance: none;
    outline: none;
    border: 0;
    background-color: transparent;  
}

在这里定义了一个类名为content的容器，在里面定义了一个p元素和一个select框，p元素的作用是显示出当前select框选中的值，而select框使用定位置于顶层，因为select框中的内容在显示的时候并不能够居中显示，因此，只好借用p标签，来显示它的内容，因为p标签的内容可以借助text-align: center;来水平居中，此时不能显示select框中的内容，故将字体颜色变为透明即：transparent
下面是js代码

var sfysb = document.getElementById("sfysb");  //通过id获取标签
function shebei(dom){                          //此函数的作用是将当前选中的内容放到p标签中
    var value = dom.value;                     //  获取当前选中元素的value值  
    sfysb.innerHTML = value;                   //将值写入指定的p标签中
}

这样在苹果手机上面和普通手机上面还有电脑端的显示效果都是一样的，今天就分享到这里趴~