bootstrap custom-file border color ändern

    Was für ein blau meinst du?


    Dunkelblau? Normales Blau? Hellblau? Violett? Lila?


    Im CSS ist kein blauer Rand hinterlegt. Beim Anklicken wird zwar ein dünner, hellblau/lila Rand sichtbar. Das ist jedoch eine Art optische Täuschung durch die unterschiedlichen Grautöne.

    Der blaue Rand erscheint bei mir nicht.


    Ich verstehe aber auch nicht was du mit


    Zitat

    Wenn du auf den Brwose button druckst, dann im Windows File Menu auf abbrechen clickst, erscheint in Firefox der balue rand


    meinst. Der Button in deinem Beispiel hat auch nicht die Beschriftung "Browse" sondern "Upload".


    Hast du hier den richtigen Quelltext gepostet?

    Ich hatte bootstrap nicht drin!

    Klappt es jetzt? Siehst du mein Problem?




    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>


    .custom-file-label::after {

    left: 0;

    right: auto;

    border-left-width: 0;

    border-right: inherit;

    }


    .custom-file-label[data-browse]::after {

    background-color: #6c757d;

    color: white;

    width: 10em;

    text-align:center;

    border-radius: 4px

    }

    </style>

    <html>


    <div class="container ">

    <form method=post enctype=multipart/form-data>

    <div class="custom-file" >

    <input id="logo" type="file" name=file class="custom-file-input" >

    <label for="logo" class="custom-file-label text-right" data-browse="Browse">Choose file...</label>

    </div>

    </form>

    </div>


    </html>

    Zitat von klaus1234

    weiss jemand wie ich hier den blauen Rand vom <div class="custom-file" > weg kriege. Ein blauer Rand erscheint wenn der Browse Button geklickt wird.

    Der Rand (bzw. eigentlich Rand+Schatten) gehört nicht zum div sondern zum label - und da sollte er auch unbedingt bleiben, sonst ist bei Tastaturbedienung nicht erkennbar dass das Element den Focus hat!

    Zitat von klaus1234

    der kann gerne da bleiben, ich wurde nur gerne die farbe ändern

    Dann mach das doch. Wie gesagt, der Rahmen/Schatten gehört zum label, die Farben kannst du überschreiben. Mehr verrät dir dein Browser wenn du den Seiteninspektor öffnest und das Element untersuchst (Rechtsklick->Untersuchen oder F12)

    Zitat von Sempervivum

    Dieser blaue Rahmen zeigt an, dass das Element den Focus hat. Wie Du ihn unterdrücken kannst, kannst Du hier nachlesen:

    Das ist der Nachteil an SO: der größte Müll als Antwort ist und bleibt oben, die einzig sinnvolle Antwort steht weiter unten: https://stackoverflow.com/a/14091101 - der Rahmen darf nicht unterdrückt werden!

    Die Schwierigkeit dir zu helfen ist, dass wir das Problem nicht nachvollziehen können.


    Mit deinen Quelltextschnipseln können wird das Problem nicht nachbauen. Zudem passt deine Grafik nicht zu deinen Quelltextschnipseln.


    Wenn dein Quelltext die komplette Webseite ist solltest du zunächst die Fehler beseitigen. Zum Beispiel fehlende Elemente wie body enfügen.


    Soweit ich deiner Grafik entnehmen kann ist nicht das Label-Element das Problem. Der Rahmen liegt um einen der umgebenen Container wie form oder div. Das kann ich aber anhand deiner Angaben leider nicht nachvollziehen.


    Am besten wäre du würdest die Seite online stellen. Oder den Quelltext der gesamten Seite zeigen.

    Zitat

    Mit deinen Quelltextschnipseln können wird das Problem nicht nachbauen.

    Ich schon ;)

    Klicke ich auf das Eingabefeld erscheint der blaue Rahmen und der Filechooser popt auf. Breche ich diesen ab, verschwindet er wieder und der blaue Rahmen bleibt solange das Element den Focus behält. Getestet mit Opera, ich kann nicht garantieren, dass sich andere Browser genau so verhalten.

    Zitat von MrMurphy

    Mit deinen Quelltextschnipseln können wird das Problem nicht nachbauen. Zudem passt deine Grafik nicht zu deinen Quelltextschnipseln.

    Doch. Mit dem Code aus #6 lässt sich das "Problem" problemlos nachvollziehen, sowohl mit Vivaldi (->Blink-Engine) als auch mit Firefox. Und ja, der Code ist nicht ganz koscher (<body> fehlt allerdings nicht, das ist optional) - ist aber aber nicht so wichtig, das Verhalten lässt sich ja nachvollziehen.


    Zitat von MrMurphy

    Soweit ich deiner Grafik entnehmen kann ist nicht das Label-Element das Problem.

    Doch, frag deinen Browser.


    Zitat von klaus1234

    hat leider nicht funktioniert, zumal ich ja nur die Farbe ändern muss in grau.

    Der Code ist ja auch Unsinn und sollte als Giftmüll fachgerecht entsorgt werden. Wie der Code aussehen muss den du brauchst verrät dir - wie schon geschieben - der Seiteninspektor (->F12), auch die zu ändernden Eigenschaften habe ich bereits genannt (Rahmen und Schatten wobei von letzterem deutlich mehr zu sehen ist)

    Ich konnte das Problem jetzt doch nachvollziehen.


    Um den Rahmen zu verhindern musst du in den style-Block folgende CSS-Anweisung hinzufügen:


    Code
    .custom-file-input:focus ~ .custom-file-label {
   border-color: lightgrey;
   box-shadow: none;
}

    Die Tilde ist ein sogenannter Geschwister-Selektor.


    Damit werden Elemente auf der gleichen Ebene ausgewählt. Die meisten anderen Selktoren können nur Elemente auf tieferstehenden Ebenen ansprechen.


    Ich habe die Einstellungen mit meinen Erfahrungen gesucht.


    Meinst du mit "Firefox debugger" die Möglichkeit "Element untersuchen"? Da ist die CSS-Anweisung etwas tricky zu finden. Dort habe ich sie erst im nachhinein gefunden.


    Und zwar muss beim input-Element die :focus angeklickt werden und dann müssen im Label-Element die CSS-Anweisungen kontrolliert werden. Heißt: Beim an- und abklicken von :focus ist kein Unterschied zu sehen, da der bei dem Label-CSS angezeigt wird. Ohne zu wissen dass im Bootstrap-CSS die "Geschwister-Anweisung" hinterlegt ist helfen die Firefox-Infos da nicht weiter.

    Das habe ich aus analogen Informationen gelernt - also Büchern. Nach YouTube-Videos habe ich noch nicht gesucht. Mit der Suche nach "CSS Geschwister-Selektoren einfach erklärt" werden aber jede Menge deutschsprachige Videos angeboten. Die Qualität wird gemischt sein, da musst du dich dann etwas durchklicken:


    https://www.youtube.com/result…oren+einfach+erkl%C3%A4rt


    Auf die schnelle habe ich diese beiden Videos speziell zu Geschwister-Selektoren (es gibt noch das plus-Zeichen) gefunden:


    https://www.youtube.com/watch?v=DInky_FW69I


    und


    https://www.youtube.com/watch?v=eBAiOQzpJzo

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden