appearance改变是否影响元素的box-sizing测试实例页面

CSS代码：

.input {
    height: 50px;
    padding: 20px;
    background-color: #f0f3f9;
    background-clip: content-box;
    border: 1px solid #beceeb;
}
.appearance {
    -webkit-appearance: searchfield;
}
                

HTML代码：

<p>type="text"</p>
<input id="input" class="input" name="unmatch">
<p><button id="button">appearance改为search输入框</button> 仅webkit</p>
<p>type="search"</p>
<input type="search" class="input" name="unmatch">
                

JS代码：

var button = document.getElementById('button'), input = document.getElementById('input');
if (button && input) {
    button.onclick = function() {
        input.className = 'input appearance';
        button.innerHTML = '已修改';
    };
}