Как отобразить половину изображения перед Css

Я использовал выбранный плагин js для создания нескольких выборок. Я пытаюсь настроить его стиль. Я хочу, чтобы когда элемент не выбран, слева был маленький серый квадрат. Если элемент выбран, он отобразит маленький синий квадрат. В настоящее время у меня есть изображение, содержащее 2 маленьких квадрата, я попытался показать квадрат слева, но он показывает оба квадрата, я хочу, чтобы отображалась только верхняя или нижняя половина. Как я могу это сделать? Это то, что я пытался попробовать.

.chosen-container-multi.chosen-with-drop .chosen-drop .chosen-results li::before {
            content: url('https://image.ibb.co/iLpwap/Selection_Icon.png');
            position: relative; 
            padding-right: 10px;
 }

Отобразить половину изображения перед css

Вы не можете сделать это с изображением в свойстве content. Вы можете сделать фоновое изображение спрайт псевдоэлемента, а затем настроить background-position.

— 14.08.2018 12:24

codepen.io/Paulie-D/pen/vaMpXN

— 14.08.2018 12:31

css

14.08.2018 12:21

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Использование листа спрайтов в качестве содержимого псевдоэлемента ::before не позволит вам обрезать его так, как вы хотите.

Вместо этого используйте лист спрайтов в качестве фонового изображения и соответствующим образом измените размер псевдоэлемента.

В выбранном состоянии переместите фоновое изображение так, чтобы была видна синяя область.

var config = {
   '.chosen-select': {},
   '.chosen-select-deselect': {
     allow_single_deselect: true
   },
   '.chosen-select-no-single': {
     disable_search_threshold: 10
   },
   '.chosen-select-no-results': {
     no_results_text: 'Oops, nothing found!'
   },
   '.chosen-select-rtl': {
     rtl: true
   },
   '.chosen-select-width': {
     width: '95%'
   }
 }
 for (var selector in config) {
   $(selector).chosen(config[selector]);
 }

.chosen-container-multi .chosen-choices li.search-choice {
   line-height: 30px !important;
   margin: 5px 5px 5px 0 !important;
 }

 .chosen-container-multi.chosen-with-drop .chosen-drop .chosen-results li::before {
   content: ""; /* Changed */
   position: relative;
   z-index: 100000;
   margin-right: 10px; /* Changed */
   display: inline-block; /* Added */
   width: 22px; /* Added */
   height: 24px; /* Added */
   background: url(https://image.ibb.co/iLpwap/Selection_Icon.png); /* Added */
 }

 .chosen-container-multi.chosen-with-drop .chosen-drop .chosen-results li.result-selected::before {
   background-position: 0 -24px; /* Added */
 }

 .chosen-container-multi .chosen-drop .result-selected {
   color: #444 !important;
 }

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel = "stylesheet"/>

<select chosen multiple data-placeholder = "Select a item" class = "chosen-select" style = "width: 400px;">
    <option value = "18">Item Test 1</option>
    <option value = "19">Item Test 2</option>
    <option value = "20">Item Test 3</option>
    <option value = "" selected = "selected">Select a Item</option>
</select>

14.08.2018 12:31

Я обновил код, можете проверить

http://jsfiddle.net/L6kmd3rb/14/

 .chosen-container-multi .chosen-choices li.search-choice {
line-height: 30px !important;
margin: 5px 5px 5px 0 !important;
}

.chosen-container-multi.chosen-with-drop .chosen-drop .chosen-results li::before {
content: url('https://image.ibb.co/iLpwap/Selection_Icon.png');
position: relative; /*or absolute*/
 z-index: 100000; /*a number that's more than the modal box*/
 padding-right: 10px;
 height:20px;
 display:block;
 overflow:hidden;
}
.chosen-container-multi .chosen-drop .result-selected {
color: #444 !important;
}

Спасибо

Это не работает. Когда элемент выбран, синий значок не отображается.

— 14.08.2018 12:39

14.08.2018 12:32