Common CSS Tricks

Show only a few lines with …

    display: -webkit-box;
    -webkit-line-clamp: 6;
    overflow: hidden;
    -webkit-box-orient: vertical;

Targeting Firefox with css

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

Overflow without any scrollbar.

.selector {
overflow: auto;
 }

/* Hide scrollbar for Chrome, Safari and Opera */
.selector::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
.selector {
  -ms-overflow-style: none;
}

Style Select

.select-css {
    display: block;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    width: 100%;
    max-width: 100%; 
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
    display: none;
}
.select-css:hover {
    border-color: #888;
}
.select-css:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222; 
    outline: none;
}
.select-css option {
    font-weight:normal;
}

HTML Entities

Styling Responsive Video players.

	
// styles .codeytek-video-wrap { position: relative; padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */; } .codeytek-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; iframe { width: 100%; height: 100%; } }

Styling a select box with CSS and JavaScript

* - In the below input element, value is term id, name is term name.
* - The div#select-box-list needs to have the same input id's of '.select-box__input' in their respective
* 'for' attribute.
* - The first element here is checked and when any option is selected:
* 1. We uncheck all inputs first,
* 2. We grab the selected input element by its id, add a checked attribute to it.
* 3. Fill the selected value in the hidden input.

HTML

<div class="select-box">
			<div class="select-box__current" id="select-box-current" tabindex="1">
				<input type="hidden" id="selected-input-val" value="">
				<div class="select-box__value">
					<input class="select-box__input" type="radio" id="select-box-input-0" value="1" name="Cream" checked="checked"/>
					<p class="select-box__input-text">Cream</p>
				</div>
				<div class="select-box__value">
					<input class="select-box__input" type="radio" id="select-box-input-1" value="2" name="Cheese"/>
					<p class="select-box__input-text">Cheese</p>
				</div>
				<div class="select-box__value">
					<input class="select-box__input" type="radio" id="select-box-input-2" value="3" name="Milk"/>
					<p class="select-box__input-text">Milk</p>
				</div>
				<div class="select-box__value">
					<input class="select-box__input" type="radio" id="select-box-input-3" value="4" name="Honey"/>
					<p class="select-box__input-text">Honey</p>
				</div>
				<div class="select-box__value">
					<input class="select-box__input" type="radio" id="select-box-input-4" value="5" name="Toast"/>
					<p class="select-box__input-text">Toast</p>
				</div>
				<span class="select-box__icon" aria-hidden="true">
					<svg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M17 1L8.84906 10L1 0.999999" stroke="#C7C7C7"/>
					</svg>
				</span>
			</div>
			<ul class="select-box__list" id="select-box-list">
				<li>
					<label class="select-box__option" for="select-box-input-0" aria-hidden="aria-hidden">Cream</label>
				</li>
				<li>
					<label class="select-box__option" for="select-box-input-1" aria-hidden="aria-hidden">Cheese</label>
				</li>
				<li>
					<label class="select-box__option" for="select-box-input-2" aria-hidden="aria-hidden">Milk</label>
				</li>
				<li>
					<label class="select-box__option" for="select-box-input-3" aria-hidden="aria-hidden">Honey</label>
				</li>
				<li>
					<label class="select-box__option" for="select-box-input-4" aria-hidden="aria-hidden">Toast</label>
				</li>
			</ul>
		</div>

Css

.select-box {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  font-family: 'Open Sans', 'Helvetica Neue', 'Segoe UI', 'Calibri', 'Arial', sans-serif;
  font-size: 18px;
  color: #60666d;
  
  @media (min-width: 768px) {
    width: 70%;
  }
  
  @media (min-width: 992px) {
    width: 50%;
  }
  
  @media (min-width: 1200px) {
    width: 30%;
  }
  
  &__current {
    position: relative;
    box-shadow: 0 15px 30px -10px transparentize(#000, 0.9);
    cursor: pointer;
    outline: none;
    
  &.is-open {
      & + .select-box__list {
        opacity: 1;

        // We have to set "animation-name: none;" to make the list visible (read below how it works)

        animation-name: none;
        
        .select-box__option {
          cursor: pointer;
        }
      }
      
      .select-box__icon {
        transform: translateY(-50%) rotate(180deg);
      }
    }
  }
  
  &__icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 20px;
    opacity: 0.3;
    transition: 0.2s ease;
  }
  
  &__value {
    display: flex;
  }
  
  &__input {
    display: none;
    
    &:checked + .select-box__input-text {
      display: block;
    }
  }
  
  &__input-text {
    display: none;
    width: 100%;
    margin: 0;
    padding: 15px;
    background-color: #fff;
  }
  
  &__list {
    position: absolute;
    width: 100%;
    padding: 0;
    list-style: none;
    opacity: 0;
    
    // We need to use animation with delay.
    // Otherwise the click event will not have time to run on label, because this element disapears immediately when .select-box__current element loses the focus.
    // This delay will not be noticed because we set "opacity" to "0".
    // We also use "animation-fill-mode: forwards" to make the list stay hidden.
    
    animation-name: HideList;
    animation-duration: 0.5s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: step-start;
    box-shadow: 0 15px 30px -10px transparentize(#000, 0.9);
  }
  
  &__option {
    display: block;
    padding: 15px;
    background-color: #fff;
    
    &:hover,
    &:focus {
      color: #546c84;
      background-color: #fbfbfb;
    }
  }
}

@keyframes HideList {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

JavaScript

( function ( $ ) {
	class DropDown {

		/**
		 * Constructor.
		 *
		 * @return {void}
		 */
		constructor() {

			this.selectBox = $( '#select-box-current' );
			this.options   = $( '.select-box__option' );
			this.selectedBoxInputEls = $( '.select-box__input' );

			// Hidden input here holds the selected value.
			this.hiddenInput = $( '#selected-input-val' );

               		this.addEvents();
		}

		addEvents() {
			this.selectBox.on( 'click', ( event ) => this.toggleDropdown( event ) );
			this.options.on( 'click', ( event ) => this.selectOption( event ) );
		}

		/**
		 * Show/hide the dropdown.
		 *
		 * @param event
		 */
		toggleDropdown( event ) {
			this.selectBox.toggleClass( 'is-open' );
		}

		/**
		 * Select option.
		 *
		 * @param {Object} event Event.
		 */
		selectOption( event ) {

			// Remove checked attributed from all elements, so that we can add it only to the one that is selected.
			this.selectedBoxInputEls.attr( 'checked', false );

			// Get the id of the selected input element, using for attribute.
			const selectedElId = $( event.target ).attr( 'for' );
			const selectedInputEl = $( `#${ selectedElId }` );

			// Get the selected term id.
			const selectedTermId = selectedInputEl.val();

			// Set the id of the selected term in the hidden input value.
			this.hiddenInput.val( selectedTermId );

			// Add the checked attribute to the element that is selected.
			selectedInputEl.attr( 'checked', 'checked' );

			// @TODO Perform any other required action here, using the selected term id.
		}

	}

	new DropDown();

} )( jQuery );

nth Child Tester

Hide placeholder

// Make the placeholder invisible
::-webkit-input-placeholder { /* WebKit browsers */
	color: transparent;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: transparent;
	opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: transparent;
	opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: transparent;
}

Leave a Reply

%d bloggers like this: