我正在尝试调整一个qinput搜索框的高度，使其与工具栏中的按钮相匹配，我不知道如何改变焦点的高度，我创建了一个codepen来显示这个问题，尝试了各种方法。

我一直在尝试改变颜色，然后找出如何调整高度和边框半径。有什么想法，我需要做什么？
下面是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：

.mod-outline:focus {
  outline: none !important;
  border-color: green;
  border-radius: 0;
  max-height: 24px;
}
.search-field {
  max-height: 24px;
  .q-field__native:focus* {
    outline: none !important;
    border: 0px solid transparent;
  }
  .q-field__control {
    max-height: 24px;
    .q-field__prepend {
      max-height: 24px;
    }
    .q-field__control-container {
      max-height: 24px;
    }
  }
}