第一个问题，开发者工具上的input的实现和客户端的实现是不一样的，开发者工具只是用一个html input来模拟，z-index过高确实有问题，后续版本fixed掉，不会影响到在手机上的效果。

第二个问题的样式设置是怎么样的？能不能提供详细的demo。

期望的是输入区域的宽度跟你设置在wx-input的宽度是一样的。

请问您解决了？我也遇到了同样的问题

我也遇到了你的第二个问题，这个问题你解决了吗?除了设置100%有没有别的解决办法？

这是70%的效果

这是15%的效果

可以明显看出实际输入区和外层wx-input的输入区的不同

需要search-bar外层有个container，只要外面的container的宽度是100%就好

<view class="search-bar-container">
    <input class="search-bar-input" bindinput="onInput" placeholder-class="search-bar-input-placeholder"
           placeholder="请输入搜索内容" focus="true" value="{{searchKey}}" bindconfirm="completeInput"/>
    <view bindtap="cancelInput" class="search-bar-cancel-button">取消</view>
</view>

.search-bar-container {
    width: 100%;
    height: 80rpx;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f2f2f2;
}

.search-bar-input {
    height: 50rpx;
    width: 70%;/*这里数值该小更明显，建议试试改到15%*/
    background-color: #f2f2f2;
    border-radius: 4px;
    padding-left: 5%;
    padding-right: 5%;
    font-size: 25rpx;
}

.search-bar-cancel-button {
    color: #ff4466;
    width: 10%;
    margin-left: 5%;
    font-size: 28rpx;
    line-height: 50rpx;
}

主要来说就是给input标签设置一个width，指定为百分比形式。大概里面的input会继承这个百分比？而且最重要的问题是我没法设置里面真正输入框的宽度……