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

最新推荐文章于 2024-04-11 07:00:30 发布

时时师师

最新推荐文章于 2024-04-11 07:00:30 发布

阅读量1.4k

点赞数

分类专栏： JSP、HTML、CSS、JS的小知识点

本文链接：https://blog.csdn.net/qq_41915723/article/details/115346794

版权

JSP CSS 选择框美化 JavaScript 表单验证

关键词由CSDN通过智能技术生成

JSP、HTML、CSS、JS的小知识点专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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>