效果图
第一步
外观-自定义CSS
代码语言:javascript复制 .baidu-dwo{
width: 100%;
padding-bottom: 6px;
}
.baidu-dwo_form{
position: relative;
box-sizing: border-box;
border: 1px solid var(--theme);
border-radius: 4px;
margin-bottom:5px;
overflow: hidden;
}
.baidu-dwo_input{
border: none;
font-size: 16px!important;
font-weight: 100!important;
color: var(--main);
outline: none;
border-radius: 0;
padding: 9px 8px;
margin-bottom: -2px;
background-color: transparent!important;
}
.baidu-dwo_input:focus{
outline: none;
}
.baidu-dwo_submit{
position: absolute;
right:2px ;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
border: none;
border-radius: 4px;
background-color: var(--theme);
color: #ffffff;
padding: 6px 8px;
cursor: pointer;
}
.baidu-dwo_tip{
font-size: 13px;
color: var(--minor);
}
第二步
侧边栏-自定义侧边栏
代码语言:javascript复制<section class="joe_aside__item qrcode">
<div class="joe_aside__item-contain" style="padding-bottom: 10px;">
<div class="baidu-dwo">
<form class="baidu-dwo_form" action="https://www.baidu.com/s"
method="GET" target="_blank">
<input class="baidu-dwo_input" type="text" name="wd"
validatetarget="q"
validatetype="must"
placeholder="关键词:OS酷资源分享" value="OS酷资源分享">
<input class="baidu-dwo_submit" type="submit" value="搜索">
</form>
</div>
</div>
</section>