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>
Gast
#6581212
cdn haste vergessen.
> 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>
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>
Gast
#6581491
der blaue Rand kommt durch den Fokus.
probiers mal mit:
input:focus{
outline: none;
}
hat nicht funktioniert ;-(
nimm dies Bootstrap:
1 | |
2 | |
3 | |
4 | |
5 | |
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
H. R. schrieb:1 | |
2 | |
3 | |
4 | |
5 | |
Sieht mir nicht nach validem HTML aus... merciless