J'essaie de donner un champ de saisie personnalisé (téléchargement de fichier) coins arrondis .
J'utilise le même CSS que sur tous mes autres champs de saisie (texte, nombre, mot de passe) sur le même formulaire où cela fonctionne bien mais je ne peux pas appliquer le même dans le champ ci-dessous.
J'ai essayé sur le champ de saisie, sur les travées et sur le div ainsi qu'avec une classe et avec du CSS en ligne mais rien ne fonctionne ici (sur tous les autres champs je l'applique juste sur l'entrée et ça marche très bien).
Quelqu'un peut-il me dire comment résoudre ce problème?
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input cursor-pointer" id="attachment" name="attachment"/>
<label for="attachment" class="custom-file-label cursor-pointer rounded4">
<span class="rounded2r">Attachment</span>
</label>
</div>
</div>
**Update:**
Added the CSS classes the way I was closest to what I need.
This gives me rounded corners on the left but not on the right side of the field.
.rounded2l {
border-radius: 25px 0px 0px 25px;
}
.rounded2r {
border-radius: 0px 25px 25px 0px;
}
.rounded4 {
border-radius: 25px;
}
3 Réponses :
Ils sont arrondis, mais vous ne les voyez pas.
Peut-être que vous utilisez une couleur d'arrière-plan dans votre css pour "voir" comment les éléments ont des coins arrondis.
Premier jeu p>
.rounded2r {
border-radius: 0px 25px 25px 0px;
background-color: pink;
}
L'étiquette a tous les coins arrondis.
L'ensemble:
.rounded4 {
border-radius: 25px;
background-color: lime;
}
La portée à l'intérieur a 2 sur le côté droit.
pour appliquer CSS à la balise d'entrée, vous devrez l'appliquer directement à cette entrée en utilisant
.rounded2l,
input[type=file]{
border-radius: 25px 0px 0px 25px;
border: 1px solid #000;
}
ou comme dans votre cas, vous pouvez l'ajouter à l'une des classes que vous avez à la Fichier de style CSS comme celui-ci
input[type=file]
espérons cette aide
Merci. Cela ne change rien car l'entrée se trouve derrière l'étiquette qui est ici exprès.
la classe d'entrée elle-même ne contient aucune des classes que vous nous avez fournies, appliquant arrondi21 à la classe affichera le style
Le moyen le plus simple de résoudre ce problème est de masquer l'interface utilisateur native ( input type = "file" ) et de formater le libellé comme s'il s'agissait d'un bouton.
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input cursor-pointer" id="attachment" name="attachment"/>
<label for="attachment" class="file-upload" class="custom-file-label cursor-pointer rounded4">
<span class="rounded2r">Upload Attachment</span>
<span id="filename"></span>
<!-- insert filename using javaScript when file has uploaded -->
</label>
</div>
</div>
.rounded2l {
border-radius: 25px 0px 0px 25px;
}
.rounded2r {
border-radius: 0px 25px 25px 0px;
}
.rounded4 {
border-radius: 25px;
}
input[type=file] {
display: none;
}
.file-upload {
margin: 1rem;
border-radius: 25px;
background-color: #006600;
color: #fff;
padding: 0.5rem;
cursor: pointer;
}
Merci pour cela ! Cela fonctionne mais je n'ai plus la partie de l'entrée qui montre le nom du fichier resp. mon texte d'espace réservé.
Une fois le fichier téléchargé, vous pouvez utiliser JavaScript (Angular, jQuery, peu importe) pour insérer le nom de fichier dans une plage après l'étiquette. J'ajouterai du code html pour la durée.
Merci beaucoup. Avec la mise à jour, cela fonctionne parfaitement pour moi. Exactement ce que je cherchais.
Le code HTML que vous avez affiché ne contient aucune de ces classes que vous essayez de sélectionner dans votre CSS.
Copie possible de Styling an input type = "file" button
@ 04FS: Ajout des classes CSS de la manière dont j'étais le plus proche de ce dont j'avais besoin. Cela me donne des coins arrondis sur la gauche mais pas sur le côté droit du terrain.
Sans voir le CSS pour toute la page, il est difficile de dire ce qui se passe. Il y a probablement une déclaration de style ailleurs qui remplace le bouton que vous essayez de faire arrondir. La façon paresseuse de faire cela est de forcer le style avec! Important. Le meilleur moyen est de savoir où le style de bouton est déjà déclaré et de le remplacer. Utilisez l'élément Inspect dans et regardez en cascade.