title: How can I customize the style in cdk draggable mode?
body: <p>I have programmed a small list of characters. These contain mat-checkboxes and you can move them around using Cdk Drag Drop. All good so far! Now would also like to customize the style draggable as well. I read that you can do it with the class .cdk-drag-preview. I also use this class for box-shadow. I tried to access mat-checkboxes via .cdk-drag-preview and style them. Unfortunately this did not work. Do you know how to do this?</p>
  <p>My WORK in Stackblitz: <a href="https://stackblitz.com/edit/angular-cdk-drag-drop-vsge6t?file=app%2Fcdk-drag-drop-connected-sorting-example.css" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-cdk-drag-drop-vsge6t?file=app%2Fcdk-drag-drop-connected-sorting-example.css</a></p>
  <p>My Code:</p>
  <pre><code>// HTML
  
  &lt;form [formGroup]=&quot;reportCompositionForm&quot;&gt;
    &lt;div class=&quot;drag-container&quot;&gt;
      &lt;div cdkDropListGroup&gt;
        &lt;div
          cdkDropList
          [cdkDropListData]=&quot;displayCharactersArray&quot;
          class=&quot;item-list&quot;
          (cdkDropListDropped)=&quot;drop($event)&quot;
        &gt;
          &lt;div
            class=&quot;item-box&quot;
            *ngFor=&quot;let element of displayCharactersArray; let i = index&quot;
            cdkDrag
          &gt;
            &lt;mat-checkbox (change)=&quot;onChange($event)&quot; [value]=&quot;element&quot;&gt;
              &lt;span (click)=&quot;deactivateCheckBoxClickEvent($event)&quot;&gt;
                {{ element.viewValue }}
              &lt;/span&gt;
            &lt;/mat-checkbox&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <pre><code>// CSS
  .drag-container {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    width: 400px;
  }
  
  .item-list {
    display: block;
  }
  
  .item-box {
    display: flex;
    font-size: 14px;
    color: #ffffff;
    background-color: #9594947a;
    border: 1px solid #9594947a;
    border-radius: 4px;
    margin-bottom: 5px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: move;
  }
  
  .cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
      0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
  
  .cdk-drag-placeholder {
    opacity: 0;
  }
  
  .cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }
  
  .item-list.cdk-drop-list-dragging .item-box:not(.cdk-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }
  
  :host ::ng-deep .item-box mat-checkbox label.mat-checkbox-layout {
    margin-left: 5px;
    margin-bottom: 1px;
  }
  
  :host
    ::ng-deep
    .item-box
    mat-checkbox
    label.mat-checkbox-layout
    span.mat-checkbox-label
    span {
    cursor: move;
  }
  
  :host
    ::ng-deep
    .item-box
    mat-checkbox
    label.mat-checkbox-layout
    span.mat-checkbox-inner-container
    .mat-checkbox-frame {
    border-color: #e1dfdf;
  }
  
  :host
    ::ng-deep
    .item-box
    mat-checkbox
    label.mat-checkbox-layout
    span.mat-checkbox-inner-container
    .mat-checkbox-ripple
    .mat-ripple-element {
    background-color: transparent;
  }
  
  :host
    ::ng-deep
    .item-box
    .mat-checkbox-checked.mat-accent
    .mat-checkbox-background,
  .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: transparent;
  }
  
  </code></pre>