如何调整QInput组件焦点边框的高度？

针对你要匹配工具栏按钮高度的需求，Quasar的QInput在outlined模式下的焦点边框并非原生input的outline，而是由组件内部的伪元素控制的，以下是具体调整方案：

核心修改思路 #

• 目标元素：QInput的outlined样式中，焦点状态的边框是.q-field--outlined.q-field--focused .q-field__control:before伪元素
• 需同步调整容器的高度、内边距，确保整体布局对齐

修改后的代码 #

HTML（可保留原结构无需改动） #

<q-input type="search" ref="searchField" v-model="searchFieldValue" size="xs" 
  style="max-width: 140px" @keyup.enter="doSearch" rounded outlined 
  input-class="mod-outline" input-style="font-size:14px" dense placeholder="Search"
  clearable clear-icon="close" class="search-field"
>
  <template v-slot:prepend>
    <q-icon name="search" size="xs"/>
  </template>
</q-input>

SCSS（替换原样式） #

.search-field {
  /* 强制设置整体高度匹配工具栏按钮 */
  height: 24px;
  
  /* 调整控制容器的内边距，消除默认间距 */
  .q-field__control {
    height: 100%;
    padding: 0 8px;
    
    /* 调整前置图标的高度与垂直对齐 */
    .q-field__prepend {
      height: 100%;
      display: flex;
      align-items: center;
    }
    
    /* 调整输入内容容器的高度 */
    .q-field__control-container {
      height: 100%;
    }
  }
  
  /* 调整原生输入框的高度与垂直对齐 */
  .q-field__native {
    height: 100%;
    display: flex;
    align-items: center;
    outline: none !important;
  }
  
  /* 关键：修改焦点状态下的边框样式 */
  &.q-field--outlined.q-field--focused .q-field__control:before {
    height: 100%; /* 让边框高度匹配容器 */
    border-radius: 0; /* 取消圆角，可根据需求调整 */
    border-color: green; /* 自定义焦点边框颜色 */
  }
  
  /* 非焦点状态下的边框也可同步调整 */
  &.q-field--outlined .q-field__control:before {
    height: 100%;
    border-radius: 0;
  }
}

/* 移除原生输入框的默认焦点样式干扰 */
.mod-outline:focus {
  outline: none !important;
}

关键说明 #

1. 直接设置.search-field的height为目标高度（24px），确保整体容器尺寸固定
2. 焦点边框的伪元素必须设置height:100%才能匹配容器高度，同时调整border-radius实现圆角需求
3. 同步调整内部元素的垂直对齐（align-items: center），避免文字或图标偏移
4. 移除原生输入框的outline，防止默认样式干扰

内容的提问来源于stack exchange，提问作者Mark Lilback