CSS冲突.CSS更改我的<选择>班

CSS conflict. CSS changes my <select> class

本文关键字：CSS 选择 gt 冲突 lt 我的      更新时间：2023-09-26

我有一个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>

它使用引导类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和'1plugins.js。我认为问题出在这些文件上，尤其是'plugins.js'，但我不知道如何解决它。

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

请帮帮我。

代码的转换清楚地表明您在某处包含了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

希望这能有所帮助。

相关文章：