Возможно ли установить выравнивание элемента span внутри поля со списком ... Я просто пытаюсь создать одно маленькое окно со списком, мне нужно установить выравнивание по правому краю этого элемента span и еще один значок с правой стороны списка. например, список чата в фейсбуке.
Код скрипки
ТУТ
вот пример, именно то, что мне нужно .,
Вот мой проверенный код
$(document).ready(function() {
$("#testId").keyup(function() {
var x = document.getElementById('activeSpn');
var y = document.getElementById('inActiveSpn');
if ($(this).val() == "1") {
x.style.display = 'block';
y.style.display = 'none';
} else {
x.style.display = 'none';
y.style.display = 'block';
}
});
});
option {
width: 100%;
}
.sch_submit {
right: 0px !important;
top: 13px;
}
.newSup {
width: fit-content;
position: relative;
left: 40%;
}
.listbox {
background: white;
background: -webkit-linear-gradient(#ccc, white);
background: -o-linear-gradient(#ccc, white);
background: -moz-linear-gradient(#ccc, white);
background: linear-gradient(#fff, white);
border: 1px solid #ced4da;
overflow: auto;
}
.listbox option {
list-style: none;
margin: 0;
padding: 0;
}
.listbox option {
padding: 10px;
cursor: pointer;
}
.listbox option:hover {
background-color: #bbb;
}
.listbox option.active {
background: rgb(77, 176, 82);
}
option {
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
}
.listbox::-webkit-scrollbar {
width: 8px;
border: 1px solid #ced4da;
}
.listbox::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
}
.listbox::-webkit-scrollbar-thumb {
background: gray;
}
.serch {
width: 80%;
position: relative;
left: 60px;
}
#list1 {
height: 440px;
width: 100%;
margin: 10px;
text-align: center;
}
.selector {
position: relative;
left: 50px;
margin-bottom: 20px;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="row">
<div class="col-6">
<input class="form-control serch" id="supSearch" type="search" placeholder="Search..">
<div class="selector">
<!-- Green -->
<span id="activeSpn" aria-label="Active Now" style="display: inline-block; background: rgb(66, 183, 42) none repeat scroll 0% 0%; border-radius: 50%; height: 10px; margin-left: 4px; width: 10px;"></span>
<!-- red -->
<span id="inActiveSpn" aria-label="inActive" style="display: inline-block; background: red none repeat scroll 0% 0%; border-radius: 50%; height: 10px; margin-left: 4px; width: 10px;"></span>
<select class="col-12 listbox" name="List_0" size="20" id="list1" multiple="multiple">
<option class="fa fa-address-card-o" value="Komal ">Komal </option>
<option class="fa fa-address-card-o" value="Ranjeet">Ranjeet</option>
<option class="fa fa-address-card-o" value="Vishal ">Vishal </option>
<option class="fa fa-address-card-o" value="Gaurav">Gaurav</option>
<option value="Dhanpat">Dhanpat</option>
<option value="joe">joe</option>
<option value="Gowri">Gowri</option>
<option value="shankar">shankar</option>
<option value="tamil">tamil</option>
<option value="raju">raju</option>
<option value="sam">sam</option>
<option value="jhon">jhon</option>
<option value="sinns">sinns</option>
<option value="ezhil">ezhil</option>
<option value="rajput">rajput</option>
<option value="padukone">padukone</option>
<option value="siraj">siraj</option>
<option value="rajesh">rajesh</option>
<option value="ram">ram</option>
</select>
</div>
<button type="button" class="btn add-btn newSup" id="supcreate">Create Supplier</button>
</div>
<div class="col-6">
<div class="newClass" style="position:relative;left:30%; top:20%;">
<label>Test:</label>
<input type="text" class="testClass" id="testId">
</div>
</div>
</div>
</body>
</html>