Wie füge ich Schlagschatten zum Select-Element in HTML hinzu?
7 Antworten
Nun, hier ist etwas, was ich ziemlich schnell zusammengeworfen habe. Es basiert auf Modernizr für die Feature-Erkennung und schließt jedes select mit einem div ein, für das ein box-shadow festgelegt ist.
Dieser Code versucht, die äußere div um 2 px zu verkleinern, um das Auffüllen des Browsers zu kompensieren. Und das CSS:
Nicht besonders effektiv, aber immer noch besser als nichts. Das Hauptproblem hier wäre, dass die Standardformularstile des Betriebssystems unterschiedlich sein könnten. Ich habe dafür ein ziemlich großes border-radius eingestellt, aber ich glaube, dass OSX select s runder sind als das, obwohl ich nichts zur Hand habe, um es zu testen.
Siehe: Ссылка für die Live-Version.
Die einfachste Lösung ist CSS3 :
was offsetX, offsetY, blur, color
Dies funktioniert natürlich nur in einem Browser, der CSS3 boxshadows unterstützt. Sie können entweder selbst nach dem Support suchen oder ein Skript wie Modernizr
Ich war mir nicht bewusst, dass box-shadow nicht mit select elements funktioniert. Ich habe eine ziemlich einfache Lösung gefunden:
Die Idee besteht darin, DIV elements mit einer css3 box-shadow-Eigenschaft und einem z-index von -1 dynamisch zu erstellen. Funktioniert ziemlich gut für mich, Sie müssen nur die css-Eigenschaften für alle Browser übernehmen.
Sie können auch einen Schlagschatten im Eingabefeld mit reinem CSS erstellen. Um dies zu tun, müssen Sie zuerst den Rahmen deklarieren und dann können Sie die Box-Shadow-Eigenschaft verwenden, um Ihr Dropdown zu erstellen. Ich habe es kürzlich in einem meiner Projekte gemacht, also weiß ich, dass es für moderne Browser funktioniert.
Hier ist ein Beispielcode:
%Vor%Verwenden Sie CSS, um das Menü zu erstellen, das das select-Tag verwendet, um ein Dropdown-Menü zu erstellen. Ich habe es heute Abend ironisch versucht, bevor ich das gelesen habe. Sie könnten so etwas wie unten im CSS innerhalb Ihrer HTML-Seite versuchen (nicht innerhalb Ihrer externen CSS-Datei, es sei denn, Sie verlinken zuerst Ihre externe CSS-Datei in Ihre HTML-Seite, wo Ihr Menü diesen Box-Schatten-Effekt haben soll) .
%Vor%Vergessen Sie aber nicht, die Eigenschaft box-shadow hinzuzufügen. Vielleicht ist es deshalb nicht gelungen, einen Box-Shadow-Effekt für das Menü zu erstellen, das es erstellt, sondern nur daran gearbeitet hat, den Effekt für den Dropdown-Teil des Menüs selbst zu erzeugen, nachdem das Menü angeklickt wurde? Oder wenn Ihr CSS in Ihrer externen CSS-Datei enthalten war, stellen Sie sicher, dass Sie Ihre externe CSS-Datei mit Ihrer HTML-Seite verbunden haben, unabhängig davon, auf welcher HTML-Seite Ihr Menü den Box-Schatten-Effekt haben soll. :) Dies funktioniert und ist viel weniger Codierung als die meisten tun könnten. :)
Sie können nach Schatten außerhalb suchen:
%Vor%oder wenn Sie es innerhalb des Elements (für eine Schaltfläche) möchten:
%Vor%Ich habe es so gemacht:
%Vor% Ändern Sie einfach die Breite in #dropDownApple, um sie an Ihre Formularbreite anzupassen, und Sie können sich mit anderen CSS-Elementen anlegen, um die gewünschte Höhe zu erhalten. Kopiere und füge das obige zwischen <body></body> -Tags ein, um es in Aktion zu sehen. Arbeitete in IE9, Chorme, Safari und Firefox.
@phpKid
Da ich noch nicht genug Punkte hatte, um einen Kommentar hinzufügen zu können, werde ich Ihnen hier auf diese Weise schreiben: ...
Sie haben den Code erwähnt, den Sie gemacht haben. Warum alles dann, wenn eine einfache Methode von etwas wie dem folgenden CSS-Code funktionieren könnte? Es könnte diese Person davon abhalten, viel weniger Code zu verwenden. ;)
%Vor%Tags und Links javascript html jquery css