定义input输入框中的button按钮样式

Question

问题遇到的现象

定义input输入框中的button按钮样式，输入框如图显示：

输入框前端显示样式

鼠标放到输入框的样式

输入框中的button按钮

问题相关代码（前端）

<form class="joe_header__above-search" method="post" action="<?php $this->options->siteUrl(); ?>">
                <input maxlength="16" autocomplete="off" placeholder="输入关键词..." name="s" value="<?php echo $this->is('search') ? $this->archiveTitle(' » ', '', '') : '' ?>" class="input" type="text" />
                <button type="submit" class="submit">搜索</button>

问题相关代码（CSS）

.joe_header__above-search .input {
background:var(--classC);
width:170px;
height:34px;
border:1px solid transparent;
padding:0 18px;
color:var(--routine);
transition:background 0.35s, border-color 0.35s, padding-right 0.35s;
border-radius:17px 0 0 17px
}

.joe_header__above-search .input:focus {
background:var(--background);
border-color:var(--theme);
padding-right:28px
}

.joe_header__above-search .submit {
position:relative;
z-index:1;
height:34px;
border:none;
background:var(--theme);
color:#fff;
border-radius:0 17px 17px 0;
padding:0 10px
}

我想要达到的结果

怎么把输入框中的button按钮给去掉，去掉后边框和圆角的样式跟输入框一样，直接重合

Answer 1

这全去掉，padding-right占的是按钮的位置，所以 也得去
Button的HTML标签去掉