在带圆角的输入内添加按钮

Question

我希望有一个文本输入，在输入中带有一个提交按钮，并使用类似边框半径的东西使边缘变圆

我在这个问题的第二个答案中使用 css： 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;
}

但是当我添加边框半径时，按钮不再出现在输入中 我该怎么办？

Answer 1

您必须为输入文本元素添加边框和边框半径。 在您链接的示例中，它将是这样的：

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

编辑： 如果边框应该围绕两个元素，那么您可以将此 CSS 添加到按钮：

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

喜欢这里：http://jsfiddle.net/jeft24m6/

Answer 2

: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">

Answer 3

这样的事情怎么样？ <form> 现在只是一个 flex 容器，边框样式实际上应用于输入和按钮。

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

Answer 4

您的代码中有几个错误。首先，form 和 input 是原生标签，它们不需要 css 中的主题标签。如果您为表单分配 id，那将是您的#id（出于演示目的，我已为表单指定了“form”的 id。

您可以为表单指定一个边框半径，但要使按钮圆角而不使整个表单圆角，您需要在输入中添加一个边框半径。您可以使用 input (general) 为所有输入分配边框半径，或在您的 css 中指定类型 input[type=submit]

希望对你有帮助

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