I have been attempting to apply a CSS style to the select2 box once the user has selected a value. However, I am struggling to find a way to achieve this. If I make changes directly to the CSS file, the changes persist even when the placeholder is displayed and no selection has been made. Adding a class directly to the HTML does not produce the desired results.
What I need is for the following CSS to be applied when a value is selected, meaning when the placeholder is replaced with the selected value after the allowClear event is triggered. Is it possible to achieve this? I have searched extensively but haven't found a solution yet, and as I am relatively new to this, please forgive me if this seems like a basic question (English is not my primary language).
border-bottom: 1px solid #b3b3b3 !important;
This is the script I am using:
PHP/HTML
<select id="filteruser" class="select_test">
<?php while ($row33 = $result33->fetch_assoc()) { ?>
<option value="<?php echo $row33['user']; ?>"><?php echo $row33['name']; ?></option>
<?php } $stmt33->close();?>
</select>
The Select jQuery Script
<script type="text/javascript">
$(document).ready(function () {
$("#filteruser").select2( {
placeholder: "Filter user",
allowClear: true
} );
$('#filteruser').val('<?php echo $_SESSION['user']; ?>'); // Select the option with a value of 'the current filter'
$('#filteruser').trigger('change'); // Notify any JS components that the value changed
} );
</script>
Edit: HTML Output Console
<select id="filteruser" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
<option></option>
<option value="123">name3</option>
<option></option>
<option value="124">name4</option>
<option></option>
<option value="125">name5</option>
<option></option>
</select><span class="select2 select2-container select2-container--default select2-container--below select2-container--open select2-container--focus" dir="ltr" style="width: 51px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-filteruser-container" aria-owns="select2-filteruser-results" aria-activedescendant="select2-filteruser-result-cx2p-123296"><span class="select2-selection__rendered" id="select2-filteruser-container"><span class="select2-selection__placeholder">Filter user</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>