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.
<div class="codeytek-video-wrap">
<div class="codeytek-video">
<iframe>...</iframe>
</div>
</div>
// 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;
}