Question

我只是想问一下，如果用户选择了一个选项，那么select中的文本是否可能是斜体，文本是否会变为正常？我所做的是当用户处于选择状态时，文本处于正常样式，但一旦聚焦，文本就会变为斜体样式。我想要的是斜体，然后当用户选择时，文本将变为正常。这是我工作的链接。救命。提前致谢。 http://jsfiddle.net/franscla/xcd0smxj/

`HTML
<div class='select'><select >
                                    <option>- Select subject -</option>
                                    <option >Purchase</option>
                                    <option style='height:50px;'>Be Our Partner</option>
                                    <option>Technical Problems</option>
                                    <option>Others</option>
                                </select></div>

CSS


   .select {
    margin-top:10px;
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #455d74;
    box-sizing: border-box;
    display: inline-block;
    height: 40px;
    position: relative;
    vertical-align: top;
    width: 400px;
    font-family:Arial;

}

.select > select {
    background: none repeat scroll 0 0 #fff;
    border: 0 none;
    color: #7b7b7b;
    display: block;
    font-size:14px;
    height: 35px;
    line-height: 17px;
    margin: 0;
    padding: 9px 6px 5px 9px;
    width: 100%;
    font-style:italic;
}
.select > select:focus {
    -moz-outline-radius: 2px;
    color: #000;
    outline: 0px solid #3fb6f2;
    outline-offset: 0;
    font-style:normal;
}


.select:before, .select:after {
    content: "";
    pointer-events: none;
    position: absolute;


}
.select:before {
    background: inherit;
    bottom: 0;
    right: 0;
    top: 0;
    width: 29px;
}
.select:after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent transparent;
    background: url(http://www.8bitsports.net/wp-content/themes/morning/functions/wpzoom/assets/images/jquery.selectBox-arrow.gif) no-repeat 100% 100%;
    border-right: 5px solid transparent;
    border-style: solid;
    border-width: 5px;
    height: 15px;
    right: 6px;
    top: 6px;
    width: 10px;

}   


`

Answer 1

我试过这是你想要的：

$(".select").focusout(function() {
  $('select').addClass('newclass');
});

.newclass {
  font-style: normal !important;
  color: black !important;
}
.select {
  margin-top: 10px;
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #455d74;
  box-sizing: border-box;
  display: inline-block;
  height: 40px;
  position: relative;
  vertical-align: top;
  width: 400px;
  font-family: Arial;
}
.select > select {
  background: none repeat scroll 0 0 #fff;
  border: 0 none;
  color: #7b7b7b;
  display: block;
  font-size: 14px;
  height: 35px;
  line-height: 17px;
  margin: 0;
  padding: 9px 6px 5px 9px;
  width: 100%;
  font-style: italic;
}
.select > select:focus {
  -moz-outline-radius: 2px;
  color: #000;
  outline: 0px solid #3fb6f2;
  outline-offset: 0;
  font-style: normal;
}
.select:before,
.select:after {
  content: "";
  pointer-events: none;
  position: absolute;
}
.select:before {
  background: inherit;
  bottom: 0;
  right: 0;
  top: 0;
  width: 29px;
}
.select:after {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: transparent transparent;
  background: url(http://www.8bitsports.net/wp-content/themes/morning/functions/wpzoom/assets/images/jquery.selectBox-arrow.gif) no-repeat 100% 100%;
  border-right: 5px solid transparent;
  border-style: solid;
  border-width: 5px;
  height: 15px;
  right: 6px;
  top: 6px;
  width: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class='select'>
  <select>
    <option>- Select subject -</option>
    <option>Purchase</option>
    <option style='height:50px;'>Be Our Partner</option>
    <option>Technical Problems</option>
    <option>Others</option>
  </select>
</div>

设计Select标签字体样式

1 个答案: