两个问题：表单输入大于下拉select，表单输入中的加号图标不居中

Question

我有两个问题：

表单输入大于下拉列表 select: 我试过将高度更改为 select 下拉列表（在 CSS文件），但这没有用。我确实喜欢这样： height: 1000 来测试它，但它没有用。（顺便说一下，我在 select.css 中对 select 做了这个）
表单输入中的加号图标未居中：我不知道如何使它居中。我在 form.css

justify-content: center

align-items: center

form button

Select（CSS 文件）

.select {
  margin: 1rem;
  position: relative;
  overflow: hidden;
}

select {
  color: #36d1dc;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  width: 12rem;
  border-radius: 5px;
}

表格（CSS文件）

form input,
form button {
  padding: 0.5rem;
  font-size: 2rem;
  border: none;
  background: white;
  font-family: "Poppins", sans-serif;

  border-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

form button {
  color: #36d1dc;
  background: #f7fffe;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0px;

  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

form button:hover {
  background: #36d1dc;
  color: white;
}

Image

如果您需要更多信息，或者我的问题措辞不当，请告诉我。很感谢任何形式的帮助。谢谢！

Answer 1

只需将这些值添加/编辑到您的 CSS

打开 Select.css 并编辑

form button {  
   display: flex;
   align-self: stretch;
   justify-content: center;
   align-items: center;
 }

从页眉和表格中删除 min-height: 20vh

打开Select.css

 .select{
   margin: 0rem 1rem;
   align-self: stretch;
 }

 select{
  height: 100%;
 }

.select::after {
  padding: 1.3rem 1rem;
 }

这些更改将使 UI 像这样

两个问题：表单输入大于下拉select，表单输入中的加号图标不居中

Two problems: form input is larger than the dropdown select, and plus icon in the form input is not centered

css

select

centering