Forum: PC-Programmierung bootstrap HTML/CSS Frage


bootstrap HTML/CSS Frage
von H. R. (hacker_r)

Lesenswert?
• ▲
▼ 
Hi
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.

Danke
<!DOCTYPE html>
<html lang="en">

<style>

.custom-file-label::after {
    left: 0;
    right: auto;
    border-left-width: 0;
    border-right: inherit;
}
.btn{
  margin-top: 5px;
  min-height: 38px
}
.custom-file{
  margin-top: 5px;
}
.custom-file-label[data-browse]::after {
  background-color: #6c757d;
  border-color: #ffffff;
  color: white;
  width: 10em;
  text-align:center;
  border-radius: 4px
}

</style>
<html>
<br>
<div class="container ">
<form method=post enctype=multipart/form-data>
  <div class="row align-items-center" >
   <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
    <input class="btn btn-secondary btn-block" type=submit value=Upload>
   </div>
   <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 float-right">
    <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>
   </div>
  </div>
</form>
</div>
</html>

: Bearbeitet durch User
Beitrag melden Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Markierten Text zitieren Antwort Antwort mit Zitat
Re: bootstrap HTML/CSS Frage
von Queraussteiger (Gast)

Lesenswert?
• ▲
▼ 
cdn haste vergessen.

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Re: bootstrap HTML/CSS Frage
von H. R. (hacker_r)

Lesenswert?
• ▲
▼ 
> cdn haste vergessen.
meinst du das?
<script 
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"; 
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0 
xIM+B07jRM"  crossorigin="anonymous"></script>

: Bearbeitet durch User
Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Re: bootstrap HTML/CSS Frage
von H. R. (hacker_r)

Lesenswert?
• ▲
▼ 
nochmal vereinfacht:
bei h r e f muss man die Leerzeichen weg machen um es zu sehen

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" h r e 
f="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"; 
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9Jv 
oRxT2MZw1T"  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>

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Re: bootstrap HTML/CSS Frage
von chaoss (Gast)

Lesenswert?
• ▲
▼ 
der blaue Rand kommt durch den Fokus.

probiers mal mit:

input:focus{
    outline: none;
}

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Re: bootstrap HTML/CSS Frage
von H. R. (hacker_r)

Lesenswert?
• ▲
▼ 
hat nicht funktioniert ;-(

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Re: bootstrap HTML/CSS Frage
von Kolja L. (kolja82)

Lesenswert?
• ▲
▼ 
nimm dies Bootstrap:

1
.custom-file-input:focus~.custom-file-label {

2
  border-color: none;

3
  box-shadow: none;

4
  border: 1px solid #ced4da;

5
}

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Re: bootstrap HTML/CSS Frage
von Irgend W. (Firma: egal) (irgendwer)

Lesenswert?
• ▲
▼ 
chaoss schrieb:
> input:focus{

Es gibt da auch noch eine paar mehr und nicht nur "focus":
https://developer.mozilla.org/de/docs/Web/CSS/Pseudo-classes

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Re: bootstrap HTML/CSS Frage
von Dirk K. (merciless)

Lesenswert?
• ▲
▼ 
H. R. schrieb:
1
> <html lang="en">

2
> ...

3
> <html>

4
> ...

5
> </html>


Sieht mir nicht nach validem HTML aus...

merciless

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Thread beobachten | Seitenaufteilung abschalten
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.