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?

an input is the same as an submit button, did you know? its just another type (button - submit) — , Apr 25 '19 at 13:55
You've put a `border-radius` on the `
` element, not on an `` element — Chris Barr, Apr 25 '19 at 14:02

score 1 · Answer 1 · answered Apr 25 '19 at 14:08

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>

@user718229 https://jsfiddle.net/RachGal/wxz48ugy/ (this has no border radius on the form but you can fiddle with it, it's just commented out) — Rachel Gallen, Apr 25 '19 at 15:13
@user718229 could you accept my answer? Thanks. (hover to the left of the answer and click the tick..) — Rachel Gallen, May 03 '19 at 09:01

score 1 · Answer 2 · answered Apr 25 '19 at 14:09

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>

Chrissu · Answer 3 · 2019-04-25T14:42:38.437

0

You have to add a border and the border-radius to the input text element. In the example you linked, it would be like this:

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

EDIT: If the border is supposed to go around both elements, then you could add this CSS to the button:

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

Like here: http://jsfiddle.net/jeft24m6/

edited Apr 25 '19 at 14:42

answered Apr 25 '19 at 13:57

Chrissu

382
1
13

that rounds the text input but the submit button isnt inside it – user718229 Apr 25 '19 at 14:04

score 0 · Answer 4 · answered Apr 25 '19 at 14:16

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

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

Add button inside input with rounded corners

4 Answers4