2
votes

Ajouter un bouton à l'intérieur de l'entrée avec des coins arrondis

Je voudrais avoir une entrée de texte avec un bouton d'envoi à l'intérieur de l'entrée et avoir les bords arrondis en utilisant quelque chose comme border-radius

J'utilise le css de la deuxième réponse à cette question: Comment ajouter un bouton à l'intérieur de l'entrée

#form {
    display:flex;
    flex-direction:row;
    border:1px solid grey;
    padding:2px;
    border-radius:50px; /* this is me trying to round edges of input*/
}

#input {
    flex-grow:2;
    border:none;
}

html css forms

6 commentaires

Quel est votre HTML?

s'il vous plaît ajouter votre html, votre css n'est pas très utile sans lui.

une entrée équivaut à un bouton d'envoi, le saviez-vous? c'est juste un autre type (bouton - soumettre)

c'est juste un formulaire standard avec une entrée et un bouton d'envoi

Vous avez mis un border-radius sur l'élément

, pas sur un élément

cela n'a pas fonctionné quand je l'avais sur l'entrée non plus

4 Réponses :

0
votes

Vous devez ajouter une bordure et le rayon de la bordure à l'élément de texte d'entrée. Dans l'exemple que vous avez lié, ce serait comme ceci:

    border: 3px solid black;
    border-left: 0;
    border-radius: 0 30px 30px 0;

EDIT: Si la bordure est censée contourner les deux éléments, vous pouvez ajouter ce CSS au bouton:

input[type="text"] {
    width: 200px;
    height: 20px;
    padding-right: 50px;
    border: 2px solid black;
    border-radius: 30px;
}

Comme ici: http://jsfiddle.net/jeft24m6/

1 commentaires

qui arrondit l'entrée de texte mais le bouton d'envoi n'est pas à l'intérieur

1
votes

Il y a quelques erreurs dans votre code. Premièrement, form et input sont des balises natives, elles n'ont pas besoin de hashtag dans le css. Si vous attribuez un identifiant au formulaire, ce sera votre #id (j'ai donné au formulaire un identifiant de 'form' à des fins de démonstration.

Vous pouvez donner au formulaire un rayon de bordure, mais pour arrondir les boutons sans arrondir tout le formulaire, vous devez ajouter un rayon de bordure à l'entrée. Vous pouvez attribuer un rayon de bordure à toutes les entrées en utilisant input (général) ou spécifier le type d'entrée [type = submit] dans votre css p >

J'espère que cela vous aidera

<form id="form">
  <input type="text" placeholder="text" />
  <input type="submit" value="Click here" />
</form>

#form {
  width: 60%;
  display: flex;
  flex-direction: row;
  border: 1px solid grey;
  padding: 2px;
  border-radius: 50px; /*you can remove this to avoid rounded corners on the form*/
}

input {
  flex-grow: 2;
  border: none;
  border-radius: 50px;
}

2 commentaires

@ user718229 jsfiddle.net/RachGal/wxz48ugy (cela n'a pas de rayon de bordure sur le formulaire, mais vous pouvez le tripoter, c'est juste commenté)

@ user718229 pourriez-vous accepter ma réponse? Merci. (passez la souris à gauche de la réponse et cliquez sur la coche ..)

1
votes

Et quelque chose comme ça? Le n'est plus qu'un conteneur flexible, et les styles de bordure sont en fait appliqués à l'entrée et au bouton.

<form id="my-form">
  <input type="text" />
  <button type="submit">my button</button>
</form>

#my-form {
  display: flex;
  flex-direction: row;
}

#my-form input,
#my-form button {
  border-radius: 10px;
  border: 1px solid grey;
  padding: 2px;
}

#my-form input {
  flex-grow: 2;
  border-right-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#my-form button {
  background: teal;
  color: white;
  border-left-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

0 commentaires

0
votes

<input type="text"><input type="submit">

:root {
  --border-width: 4px;
  --border-radius: 10px;
  --height: 40px;
}

input[type="text"],
input[type="submit"] {
transition: box-shadow .3s;
}
input[type="text"] {
  width: 200px;
  height: var(--height);
  padding: 3px 60px 3px 5px;
  border-radius: calc(var(--border-width, 1px) + var(--border-radius, 10px));
  border-width: var(--border-width, 1px);
  box-sizing: border-box;
  border-color: blue;
  border-style: solid;
}

input[type="text"]:hover,
input[type="text"]:focus {
  outline: none;
  box-shadow: 0px 0px 2px 3px blue;
}

input[type="submit"] {
  transform: translateX(calc(-100% - var(--border-width, 1px)));
  height: calc(var(--height) - 2 * var(--border-width));
  background: blue;
  color: white;
  border: 0;
  -webkit-appearance: none;
  border-radius: 0 var(--border-radius, 10px) var(--border-radius, 10px) 0;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
  outline: none;
  box-shadow: inset 0px 0px 2px 3px white;
}

0 commentaires