Question

我正在尝试用字体真棒图标替换默认选择框箭头。它按照我的要求设置，但是当我点击自定义箭头时，下拉列表无法打开。如果我点击选择框上的任何其他位置，一切正常。我已将选择框的z-index设置为高于箭头的z-index。不确定是什么问题。

from __future__ import print_function
#import MySQLdb
import pymysql
import shutil
import os
import sys
import io
import string
import traceback
import time  
from watchdog.observers import Observer  
from watchdog.events import PatternMatchingEventHandler
from colorama import *
init()
# ==== FOR THE TRANSFORMATION SCRIPT ====
from datetime import tzinfo, timedelta, datetime
import pytz
import codecs
from pytz import timezone
import csv
# =======================================

if not os.path.exists('Archive'):
    os.mkdir("Archive")
if not os.path.exists('Failed'):
    os.mkdir("Failed")

class MyHandler(PatternMatchingEventHandler):
    patterns = ["*.csv","*.processing", "*.transforming","*.loading"]

    def process(self, event):
        """
        event.event_type 
            'modified' | 'created' | 'moved' | 'deleted'
        event.is_directory
            True | False
        event.src_path
            path/to/observed/file
        """
        eventFileName = event.src_path
        eventType = event.event_type
        if eventType == 'moved':
            eventFileName = event.dest_path
        fileNameWithPath, fileExtension = os.path.splitext(eventFileName)
        if fileExtension == '.csv':
            print (Back.GREEN +'Entering copier.py...'+ Style.RESET_ALL)
            execfile('./copier_MySQL.py')
        #if fileExtension == '.processing':
        #    print (Back.GREEN +'Entering parser_MySQL.py...'+ Style.RESET_ALL)
        #    execfile('./parser_MySQL.py')
        if fileExtension == '.processing': #change this to '.transforming' if the above parser_MySQL.py is uncommented
            t = time.time()
            print (Back.GREEN +'Entering transform_MySQL.py...'+ Style.RESET_ALL)
            execfile('./transform_MySQL.py')
            elapsed = time.time() - t
            print (Back.MAGENTA +'Time took to transform the file = '+str(elapsed)+ Style.RESET_ALL)
            print (Back.BLUE + "Exiting transform_MySQL.py..." + Style.RESET_ALL)
            print (Fore.YELLOW + "-----------#*#*#*-----------#*#*#*-----------" + Style.RESET_ALL)
        if fileExtension == '.loading':
            if os.path.isfile(eventFileName):
                t = time.time()
                print (Back.GREEN +'Entering sweeper.py...'+ Style.RESET_ALL)
                execfile('./sweeper_MySQL.py')
                elapsed = time.time() - t
                print (Back.MAGENTA +'Time took to load the file into database = '+str(elapsed-1)+ Style.RESET_ALL)
                print (Back.BLUE +"Disconnected from the MySQL server. Exiting sweeper.py..."+ Style.RESET_ALL)
                print (Fore.YELLOW+'-----------#*#*#*-----------#*#*#*-----------'+ Style.RESET_ALL)
            else:
                print (Fore.RED+eventFileName+' is not created by transform_MySQL.py. Check the above messages. NOT executing sweeper_MySQL.py'+ Style.RESET_ALL) 
    def on_moved(self, event):
        self.process(event)

    def on_created(self, event):
        self.process(event)

if __name__ == '__main__':
    observer = Observer()
    observer.schedule(MyHandler(), path='.')
    observer.start()

    try:
        while True:
            time.sleep(1)
    except KeyboardInterrupt:
        observer.stop()

    observer.join()

<DIV class="row">
                      <DIV class="col-md-12">
                        <DIV id="gallery-images">
                            <ul>
                                @foreach($productVerificationValidation->productDocumentUpload as $productDocument)
                                  <li>
                                      <a href="{{url($productDocument->file_path .'/'. $productDocument->file_name)}}" target="_blank">
                                        <img src="{{ url($productDocument->file_path .'/'. $productDocument->file_name) }}" />
                                      </a>
                                  </li>
                                @endforeach
                            </ul>
                        </DIV>
                      </DIV>
                    </DIV>

Answer 1

将此添加到:after的样式：

pointer-events: none;

所以你应该有这样的东西：

.dropdown::after {
  position: absolute;
  font-family: "FontAwesome";
  color: black;
  content: "\f107";
  bottom: 1px;
  right: 4px;
  pointer-events: none;
}

Answer 2

您可以将箭头设置为负z-index，使其不可点击。意思是，选择将是。

.dropdown::after{
   z-index: -1;
}

您在.dropdown select上设置的z-index并没有做任何事情，因为该元素仍为position: static;。将其设置为亲戚，然后确保它高于箭头

。

.dropdown select {
   position: relative;
   z-index: 2;
}
.dropdown::after{
   z-index: 1;
}

Answer 3

这对我有用：

.select-field select {
    position: relative;
    z-index: 2;
}

自定义下拉箭头单击问题

3 个答案: