Add button inside input with rounded corners

Question

Id like to have a text input with a submit button inside the input and have the edges rounded using something like border-radius

Im using the css from the second answer in this question: How to add button inside input

#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;
}

but when I add that border-radius the button no longer appears inside the input how could I do it?

Answer 1

There are a couple of errors in your code. First, form and input are native tags, they don't need a hashtag in the css. If you assign an id to the form, that wil be your #id (i've given the form an id of 'form' for demo purposes.

You can give the form a border radius, but to make the buttons rounded without rounding the entire form, you need to add a border-radius to the input. You can assign a border-radius to all inputs by using input (general) or specify the type input[type=submit] in your css

Hope this helps

#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;
}

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

Answer 2

How about something like this? The <form> is now just a flex container, and the border styles are actually applied to the input and the button.

#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;
}

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