用css样式修改select下拉标签的默认箭头样式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了用css样式修改select下拉标签的默认箭头样式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2300字，纯文字阅读大概需要4分钟。

内容图文

• JSP页面引入此CSS

•    <link href="${pageContext.request.contextPath}/style/css/style.css" type="text/css" rel="stylesheet">

• CSS代码：

.selectrJob{font:18px/29px "微软雅黑","宋体",Arial;color:#777;text-align:left;height:45px;border:2px solid #f1f1f1 !important;

    /* 清除默认的箭头样式 */
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background:#fff url(img/select_r.png) right top no-repeat;padding:6px 70px 6px 10px}

.selectrFocus{border:2px solid #c8e6de !important;background-position:right -45px}
.selectr_380{width:380px !important}

• select_r.png图片：

  

   

• JSP页面：

•     <form  id="jobForm" action="${pageContext.request.contextPath}/job/jobPosting" method="post" onsubmit="return previewJob()">
                          <input type="hidden" value="" name="id">
  <script>
                              $(function(){
                                  // 控制文档加载完成以后 选中jobNature
                                  $("#jobNature").val("${job.jobNature}");
                              });
                          </script>
                          <table class="btm">
                              <tbody>
                             <tr>
                                 <td><span class="redstar">*</span></td>
                                 <td>工作性质</td>
                                 <td>
                                         <select id="jobNature" name="jobNature" class="selectrJob selectr_380">
                                             <option value="0">--请选择工作性质--</option>
                                             <option value="全职">全职</option>
                                             <option value="兼职" >兼职</option>
                                             <option value="实习" >实习</option>
                                         </select>
                                 </td>
                             </tr>
    <tr><td></td><td></td>
                                  <td style="padding: 0px 0px 0px 0px;line-height: 0px;font-size:0px;">
                                      <span style="font-size:13px" id="jobNaturespan"></span>
                                  </td>
                              </tr>

   

• 检查此提交的值 在span中显示

•    <%--给预览按钮绑定点击事件--%>
                        <script type="text/javascript">
                            function previewJob() {
                                var positionType = document.getElementById("positionType").value;
                                var jobNature = $("#jobNature").val();
                                var positionTypespan = document.getElementById("positionTypespan");
                                var jobNaturespan =document.getElementById("jobNaturespan");
                              
                                if (positionType== "") {
                                  /*  alert("positionType="+positionType);*/
                                    positionTypespan.innerHTML = "职位类别不能为空！".fontcolor("red");
                                }else {
                                    positionTypespan.innerHTML = "".fontcolor("green");
                                }
                               if ((jobNature == "")||(jobNature == "0") ){
                                  /*  alert("jobNature="+jobNature);*/
                                    jobNaturespan.innerHTML = "工作性质不能为空！".fontcolor("red");
                                }else {
                                    jobNaturespan.innerHTML = "".fontcolor("green");
                                }
  
                                if ((positionType != "") && ( (jobNature != "")||(jobNature != "0"))&&(
                                    minimumMonthlySalary != "") )
                                ) {
                                    /** 提交表单 */
                                    document.getElementById("jobForm").submit();
                                    return true;
                                }else {
                                    return false;
                                }
                            }
                        </script>
  

   

内容总结

以上是互联网集市为您收集整理的用css样式修改select下拉标签的默认箭头样式全部内容，希望文章能够帮你解决用css样式修改select下拉标签的默认箭头样式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端