Question

我已经更改了自定义选择框的样式，甚至用css：after属性更改了箭头。

现在我的问题是，当我点击向下箭头下拉时没有打开。它是正确的，因为它在选择框的顶部。如何让它工作，所以当用户点击向下箭头下拉列表时应该打开。

HTML

<div class="select-holder select-wrap poRel col-xs-4 col-sm-4 cntry-drop-down is-valid">
  <select class="select-item validate-me p-normal-text is-valid" data-validation-type="select_validation" id="ship_country" name="ship_country" data-default-msg="Country" autocomplete="off" tabindex="3">
    <option class="p-normal-text default-selected-value" value="" selected="selected">Country</option>
    <option class="p-normal-text" value="US" selected="">USA</option>
    <option class="p-normal-text" value="AU">Australia</option>
  </select>
</div>

CSS - 用于放置select元素

之外的箭头

.select-holder:after {
    top: 12px;
    position: absolute;
    left: calc(100% - 50px);
    width: 0;
    height: 0;
    content: "\e259";
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.2em;
}

工作Demo here。

如何在箭头上绑定点击事件，这样就会打开选择框。

Answer 1

您可以使用以下CSS：

libGL: OpenDriver: trying /usr/lib64/dri/tls/i965_dri.so
libGL: OpenDriver: trying /usr/lib64/dri/i965_dri.so
libGL: dlopen /usr/lib64/dri/i965_dri.so failed (/usr/lib64/dri/i965_dri.so: undefined symbol: drm_intel_get_reset_stats)
libGL error: unable to load driver: i965_dri.so
libGL error: driver pointer missing
libGL error: failed to load driver: i965
libGL: OpenDriver: trying /usr/lib64/dri/tls/swrast_dri.so
libGL: OpenDriver: trying /usr/lib64/dri/swrast_dri.so
libGL: dlopen /usr/lib64/dri/swrast_dri.so failed (/usr/lib64/dri/swrast_dri.so: undefined symbol: drm_intel_get_reset_stats)
libGL error: unable to load driver: swrast_dri.so
libGL error: failed to load driver: swrast
X Error of failed request:  GLXBadCurrentWindow
  Major opcode of failed request:  153 (GLX)
  Minor opcode of failed request:  5 (X_GLXMakeCurrent)
  Serial number of failed request:  1371
  Current serial number in output stream:  1371

它会阻止箭头上的点击事件，因此它会冒泡到父级，使其按您的意愿工作。

Updated CodePen

将jQuery事件处理程序添加到伪选择器

1 个答案: