调整输入表单的大小

Posted

技术标签:

【中文标题】调整输入表单的大小【英文标题】:Resize input form 【发布时间】:2021-12-26 23:17:49 【问题描述】:

我正在尝试这样做:

但现在我有这个:

我不明白如何使用右侧的图标调整输入的大小...我在 col-md-12... 你可以在这里查看我的代码:

.form 
  margin-top: 8px;
  margin-left: 13px;
  display: flex;
  flex-direction: row;


.search-field 
  padding: 10px 35px 10px 15px;
  color: #fff;
  border-color: #d4e0e0;
  border-radius: 15px;
  outline: none;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #0000000D;
  border: 1px solid #D4E0E0;
  width: auto;
  color: #000;


.search-button 
  z-index: 1;
  float: inline-end;
  background: transparent;
  border: none;
  outline: none;
  margin-top: -2px;
  margin-left: -45px;


.search-button img 
  width: 20px;
  height: 20px;
  object-fit: cover;
    <div class="container">
      <div class="list row">
        <span class="font-link-bold" style= fontSize: "26px" >
          <span class="title-card font-link-blue-bold">Mes </span>Conseils
        </span>
        <div class="button-create">
          <IconCreate />  Créer un nouveau conseil
        </div>
        <br />
        <br />
        <span
          class="font-link"
          style= fontSize: "16px", color: "#657273" 
        >
          Saisir vos mots-clés ou coller un texte :
        </span>
      </div>

      <div class="row">
        <div class="col-md-12">
          <form action="/" method="GET" class="form">
            <input
              type="search"
              placeholder="Search"
              class="search-field"
            />
            <button type="submit" class="search-button">
              <img src=IconLoupe  />
            </button>
          </form>
        </div>
      </div>
     </div>

在我的 html 中,您可以看到“col-md-12”和另一个 col-md-12 占用所有空间...只需输入一个 col-md-3 或 6...

【问题讨论】:

【参考方案1】:

尝试将 .search-field 的宽度设为 100%

.search-field 
  width: 100% !important;

它应该可以工作,或者您也可以尝试为您的图标指定位置

parent 
  position: relative;

child 
  position: absolute;
  top: 5px;
  right: 20px;

【讨论】:

它可以工作,但是我的按钮太长了...如果我调整窗口大小没有正确放置... @PouneyDesign 为此,您需要为不同的屏幕添加媒体查询。请参考-css-tricks.com/a-complete-guide-to-css-media-queries

以上是关于调整输入表单的大小的主要内容,如果未能解决你的问题,请参考以下文章

如何让这个表单和按钮在响应式设计中正确调整大小?

如何动态调整 select2 输入的大小,使其与所选选项的宽度相同?

可以在上传之前在 html 表单上调整图像(客户端)的大小吗?

如何调整 UIView 的大小并强制其子视图调整大小

Select2 字段宽度难以调整大小

将分组按钮的大小调整为文本区域的大小?