Question

这可能看起来很简单，但如果我不能让它回来，我会被愚弄。我的表单有一个只读状态和编辑状态，我通过JS更改。我希望我的表单元素在处于只读状态时看起来不像表单元素。删除箭头就像在select上设置'appearance：none'一样简单，但似乎没有办法让它恢复到我的编辑状态，我已经尝试了所有的选项。也许我错过了一个，或者可能有更好的方法来做到这一点。我正在考虑回到Bootstrap下拉列表。选择是一种痛苦！尽管如此，我仍然希望尽可能保留我的表格元素。

<style>
    select {
        -webkit-appearance: none;
        border: 0;
        background-color: #ccc;
    }
    form.editing select {
        -webkit-appearance: normal;
        border: 1px solid #ccc;
        background-color: white;
    }
</style>

<form class="readonly" id="form">
    <select name="test">
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
</form>

<script>
    $(function(){
        $("#edit").on("click", function(){
           $("#form").toggleClass("editing");
        });
    });
</script>

还原箭头以选择已删除的“外观”

0 个答案: