Bootstrap: Supprimer un champ de formulaire frontière

Je suis nouveau sur le CSS et je suis en utilisant Bootstrap et je veux utiliser les formulaires de 2 façons: Avec ou sans bordures autour des champs de formulaire. Comment puis-je obtenir mieux? Voici un exemple d'un Bootstrap forme que je veux supprimer les frontières: plnkr.co/modifier/xxx1Wy4kyCESNsChK4Ra?p=aperçu.

Pour la curiosité, la raison pour laquelle je veux, c'est que je veux d'abord indiquer à l'utilisateur les données qu'il a, et ensuite afficher les frontières selon si le formulaire est en mode "modifier" ou pas. L'utilisateur peut entrer en mode "modifier" en cliquant sur "modifier"-lien ou de commencer l'édition d'un champ.

InformationsquelleAutor EricC | 2014-09-25
  1. 47

    Dans cet exemple, pour supprimer la bordure d'écrire tout simplement:

    .form-control {
    border: 0;
}

    Dans votre fichier CSS.

    Cela permettra de supprimer les frontières à partir de tous vos champs de formulaire, une approche plus souple serait d'associer une classe pour les champs de formulaire que vous souhaitez ne pas avoir de frontière, de sorte que votre HTML serait quelque chose comme:

    <input type="email" class="form-control no-border" id="inputEmail3" placeholder="Email">

    et votre CSS:

    .no-border {
    border: 0;
    box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}
    • Je vous remercie pour votre réponse, Jon! Une chose, il n'est plus que l'ombre-chose encore présents après le no-border-classe est appliquée (et je n'ai pas oublier de copier le box-shadow-line). Voir la plunker plnkr.co/modifier/xxx1Wy4kyCESNsChK4Ra?p=preview
    • Désolé @EricC j'ai mis à jour ma réponse, il convient de box-shadow: none; au lieu de box-shadow: 0; - qui va enlever l'ombre.
    • Merci beaucoup, Jon! 🙂
    • Une rapide question connexe, Jon, vous savez peut-être que l'un de trop: Pour une liste déroulante, il y a une petite flèche haut et flèche vers le bas symbole sur le côté droit. Est-il un moyen de supprimer aussi visuellement avec CSS?
    • Sans voir le code qu'il est difficile de donner une réponse exacte, mais bootstrap met généralement en bas des flèches de ce genre <span class="caret"></span> vous pouvez cibler cette catégorie dans votre CSS et de le dire à display: none; ... par exemple .caret { display: none; }. Une fois de plus, cela permettra de cacher quoi que ce soit avec une classe de .caret. Une meilleure méthode consisterait à ajouter .hide pour le HTML (<span class="caret hide"></span>) ou tout simplement supprimer cette ligne de code HTML. Espérons que cela aide @EricC
    InformationsquelleAutor Jon Kyte
  2. 9

    Dans le Bootstrap 4, vous pouvez ajouter border-0 classe à votre élément à supprimer de sa frontière.

    D'autres classes que vous pouvez utiliser - Bootstrap Des 4 Frontières

    <span class="border-0"></span>             /* remove all borders */
<span class="border-top-0"></span>         /* remove top border */
<span class="border-right-0"></span>       /* remove border on the right */
<span class="border-bottom-0"></span>      /* remove bottom border */
<span class="border-left-0"></span>        /* remove border on the left */

    Et voici un exemple de ce que vous avez demandé:

    JS:

    $("#myButton").click(function() {
  $("#myInput").toggleClass('border-0')
});

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input id="myInput">
  <input id="myButton" type="button" value="Toggle Border">
</form>

    InformationsquelleAutor Hooman Bahreini
  3. 0

    Je suis allé directement à la "entrées".

    CSS:

    input {
    border: 0;
}

    HTML:

    <input type="text" name="name" class="form-control" placeholder="Name">

    Cela permettra d'éliminer toutes les frontières de votre formulaire d'intrants.

    InformationsquelleAutor Alterfonico