javascript - CSS 冲突。 CSS 更改了我的 <select> 类

Question

我有一个 Laravel 网站，其中包含一个带有 SELECT 的表单:

<form method="POST" action="{{url('admin/createactivity')}}">

    <div class='form-group'>
        <label for="name">Name:</label>
        <input type="text" name="name" class="form-control" value="{{ old('name') }}" />
    </div>    

    <div class="form-group">
        <label for="activitytype">Type:</label>
        <select name="activitytype" class="form-control" value="{{ old('activitytype') }}">
            <option value="-">Select one</option>
            <?php
                foreach ($items as $name => $id) {
                    echo '<option value="' . $id . '">' . $name . '</option>';
                }
            ?>
        </select>
    </div>

    <div class="form-group">
        <label for="description">Description:</label>
        <input type="text" name="description" class="form-control" value="{{ old('description') }}">
    </div>

    <div>
        <button type="submit" class="btn btn-primary">Create</button>
    </div>
</form>

它使用 Bootstrap 类 form-group 和 form-control 并且它们工作得很好，但是当我使用此表单加入页面时，SELECT 突然更改了它的类从 form-control 到此:

<span class="jcf-select jcf-unselectable jcf-select-form-control">  
    <select name="activitytype" class="form-control jcf-reset-appearance" value="" style="position: absolute; height: 100%; width: 100%;">
        <option value="-">Select one</option>
        <option value="2">Aqua</option>
        <option value="1">HIIT</option>
    </select>
    <span class="jcf-select-text">
        <span class="">Select one</span>
    </span>
    <span class="jcf-select-opener"></span>
</span>

这使用了一些 JavaScript 文件，例如“jquery-1.11.3.min.js”、“query.main.js”和'plugins.js'。我认为问题出在这个文件上，尤其是“plugins.js”，但我不知道如何修复它。

问题是，在页面加载的“开始”时，我可以使用 Bootstrap 类正确地看到 SELECT 字段，但突然间，在它完全加载代码后，它发生了变化。

请帮忙。

Answer 1

代码的转换清楚地表明您正在包含 JCF - JavaScript Custom Forms 某处的图书馆:

<span class="jcf-select jcf-unselectable jcf-select-form-control">  
_____________^__________^________________^
<select name="activitytype" class="form-control jcf-reset-appearance" value="" style=...>
________________________________________________^

检查您的 plugins.js 并确保注释所有 jcf 代码或将其删除，例如:

jcf.replaceAll(); //comment this line if exist inside your ready function

希望这有帮助。