DEV Community: Sharkcoder

CSS Underline: 10+ Examples

Sharkcoder — Wed, 30 Dec 2020 10:19:19 +0000

To design links or create animations of menu buttons, you might need to use underlines. From this article, you’ll learn about several methods of creating a CSS underline: using text-decoration, border-bottom, background-image, box-shadow properties, or even SVG.

CSS Text-Decoration Property

The text-decoration property is the most straightforward way to underline text. The main issue with text-decoration, however, is its lack of customizability. We’ll see more customized examples further in this article.

For now, let’s see how we can use text-decoration for a simple CSS underline.

The text-decoration property is a shorthand property for 3 other properties:

text-decoration-line (required): overline, underline, underline overline, line-through
text-decoration-style: solid, dotted, dashed, wavy, double
text-decoration-color: for example, #ccc, blue, currentColor, or inherit
Here are several examples:

To remove the underline, simply use text-decoration: none.

If you want to add CSS underline on hover only, use these CSS rules:



a { text-decoration: none; }
a:hover { text-decoration: underline; }

An alternative to text-decoration is the border-bottom property. With border-bottom, you can also add a padding. In the example below, the first link is created with the text-decoration property, and the second one with border-bottom:



a:nth-of-type(1) {
  color: #32557f;
  text-decoration: underline #32557f dashed;
}

a:nth-of-type(2) {
  color: #32557f;
  text-decoration: none;
  border-bottom: 2px dashed #32557f;
  padding-bottom: 3px;
}

Now let’s focus on fancier styling of the CSS underline.

Gradient Underline

You can create a gradient underline with background: linear-gradient and some other background properties. Here’s an example:



<p>Sharks are a <a href="#">group of elasmobranch fish</a> characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.</p>



a::after {
  content: "";
  display: block;
  width: 32px;
  padding-top: 3px;
  border-bottom: 2px solid #f9dd94;
}

Read more tips on CSS gradients in CSS Gradients: 8 Examples of Usage.

Short Underline

CSS underline can be of any width or height — even shorter than the word or the link. For example, if you need to create a short underline to mark the beginning of a sentence or a title, use the ::after pseudo-element with the border-bottom property:



<p>Sharks are a <a href="#">group of elasmobranch fish</a> characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.</p>



a::after {
  content: "";
  display: block;
  width: 32px;
  padding-top: 3px;
  border-bottom: 2px solid #f9dd94;
}

You can also set CSS underline thickness (for example, 2 px) by applying border-bottom: 2px solid #f9dd94;.

Marker-Style Underline

You can create a short skewed underline with the transform property:



h1 {
  padding: 30px 0 8px;
  position: relative;
}

h1::before {
  content: "";
  position: absolute;
  left: 7%;
  bottom: 16px;
  width: 150px;
  height: 14px;
  transform: skew(-12deg) translateX(-50%);
  background: rgba(238,111,87,0.5);
  z-index: -1;
}

Moreover, you can create a marker-style underline for a long piece of text. Here’s an example inspired by Codepen.io/Ash:



body {
  padding: 4rem;
}

.box {
  padding: 2rem;
  max-width: 14rem;
  background-color: #f2f2f2;
  border-radius: 4px;
  max-width: 50rem;
}

Underline-specific styles:



:root {
  /* The intrinsic width of the underline stroke (in pixels). This is 
   * the same as the height of the cap images. Don't specify the
   * units! This is because of some of the calculations we do later on. */
  --underline-intrinsic-width: 8;

  /* The actual width of the underline stroke we want to render (in pixels).
   * You can modify this, and the sizing and positioning should be calculated
   * accordingly. Again, Don't specify the units! */
  --underline-width: 12;

  /* The color used to draw the underline. It should match the color
   * used in the cap images... unfortunately we can't modify the SVG
   * fill via CSS because it's a background image. */
  --underline-color: #f1a1e3;

  /* We need to know the width of the cap images so that we
   * can position everything on the x axis accordingly. */
  --underline-cap-width: 4px;

  /* The border is positioned relative to the bottom of the line.
   * We can move it upwards a little to create an overlap effect. */
  --underline-offset-y: -2px;

  /* The padding to add to the x axis. By default, the caps would be
   * aligned with the beginning and end of the line. */
  --underline-padding-x: 0.12em;
}

.text {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  color: #32557f;
  background-image:
    linear-gradient(180deg, var(--underline-color), var(--underline-color)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);

  font-size: 3rem;
  font-weight: bold;
  --underline-width: 20;
  --underline-offset-y: -2px;
  /* The cap images to use that form the left and right shape.*/
  --cap-image-left: url(https://files-6lc03kjqt.now.sh/left-2.svg);
  --cap-image-right: url(https://files-e7gkh52mq.now.sh/right-2.svg);
}

Using Images as CSS Underline

You can also use actual images (e. g. SVG or PNG) to style CSS underlines. Here are a couple of examples inspired by John D. Jameson’s CodePen.

Star-shaped CSS underline:



body {
  line-height: 1.6;
}

p {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/star.svg");
  background-position: 0 1.3em;
  background-size: 10px 9px;
  background-repeat: repeat-x;
}

You can find more underline examples on sharkcoder.com

CSS Shadows

Sharkcoder — Thu, 02 Jan 2020 13:22:50 +0000

Learn how to add different types of shadows to boxes and text.

Box-Shadow

The box-shadow property adds shadow effects around an element. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.

If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners.

The box-shadow property can have several values:

inset: changes the shadow to one inside the box — inside the border, above the background, but below content (e. g. box-shadow: 5px 10px inset;)
offset-x: (required) specifies the horizontal distance; negative values place the shadow to the left of the element; positive ones put the shadow on the right of the box
offset-y: (required) specifies the vertical distance; negative values place the shadow above the element; positive ones put the shadow below the box
blur-radius: the larger this value, the bigger the blur; negative values are not allowed (e. g. box-shadow: 10px 10px 8px #888;). If not specified, it will be set at 0 and the shadow’s edge will be sharp
spread-radius: positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink (e. g. box-shadow: 10px 10px 8px 10px #888;). If not specified, it will be 0 and the shadow will be the same size as the element
color
none: default value; no shadow is displayed

You can specify a single box-shadow using 2–4 values, and inset:

If only 2 values are given, they are interpreted as values
If a 3rd value is given, it is interpreted as a
If a 4th value is given, it is interpreted as a To specify multiple shadows, provide a comma-separated list of shadows (each one having bigger length values than the previous ones), for example:

box-shadow: 5px 5px #888, 10px 10px #7eb4e2, 15px 15px #f69ec4;

One-Sided Shadow

You can create a one-sided shadow by setting the offset-x value to 0 and applying a negative spread-radius.

box-shadow: 0 10px 5px -5px #888;

One-Sided Full-Width Shadow

To create a one-sided shadow with the length equal to the length of the element, set the offset-x value to 0 and apply a negative offset-y:

box-shadow: 0 -16px 12px 12px #000;

It will work only for a navigation bar that is sticking to the top, left, and right of the page. When applied to an element with space all around it, this kind of shadow will look like a three-sided shadow.

Shadow From Two Opposite Sides

To create a shadow that is dropped from two opposite sides, add two comma-separated lists. The second one should contain a negative value for offset-x.

box-shadow: 10px 0 10px -10px #666,
            -10px 0 10px -10px #666;

Irregular Drop-Shadows

Here are (slightly modified) examples of how to create irregular drop-shadows from Lea Verou’s book CSS Secrets. In the examples below, shadows are created with the help of the filter property, not box-shadow.

div {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  vertical-align: bottom;
  width: 5.9em;
  height: 5.2em;
  margin: .6em;
  background: #7eb4e2;
  filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
  font: 200%/1.6 'Amatic SC', cursive;
  font-weight: 700;
  text-align: center;
}

.speech {
  border-radius: .3em;

  &::before {
    content: '';
    position: absolute;
    top: 1em;
    right: -.7em;
    width: 0;
    height: 0;
    border: 1em solid transparent;
    border-left-color: #7eb4e2;
    border-right-width: 0;
  }
}

.dotted {
  background: transparent;
  border: .3em dotted #7eb4e2;
}

.cutout {
  border: .5em solid #7eb4e2;
  border-image: 1 url('data:image/svg+xml,\
                     <svg xmlns="http://www.w3.org/2000/svg"\
                      width="3" height="3" fill="%237eb4e2">\
                         <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
                      </svg>');
  background-clip: padding-box;
}

Text-Shadow

The text-shadow property is useful to add a shadow to the text. Shadows can be single-layered or multi-layered, blurred, colored or transparent. By applying a shadow to an element, you can specify only one length and color value, thus creating a color copy of a single character or word. Also, with the help of the shadow, you can make the text more readable if the contrast between the text color and the background is not sufficient.

Each shadow is applied both to the text itself and to the text-decoration property if there is one. You can set several shadows at the same time, separated by commas. Shadows overlap but do not overlap the text itself. The first shadow is always located above the rest of the shadows.

The text-shadow property can have up to four values: two or three values defining the length of the shadow and an optional color.

text-shadow: x-offset | y-offset | blur | color

x-offset: specifies the horizontal offset of the shadow; a positive value creates a shadow offset to the right of the text, and a negative length creates a shadow to the left
y-offset: specifies the vertical offset of the shadow; a positive value shifts the shadow down, a negative value shifts it up
blur: sets the blur radius; negative values are not allowed; if the blur value is 0, the edge of the shadow is clear; otherwise, the larger the value, the more blurred is the edge of the shadow

For example:

color: #fff;
text-shadow: 1px 1px #32557f,
             1px -1px #32557f,
             -1px 1px #32557f,
             -1px -1px #32557f,
             3px 3px 6px rgba(0,0,0,.5);

You can find more examples of text shadows in the article CSS Fonts on sharkcoder.com.

How To Style HTML Forms

Sharkcoder — Thu, 05 Dec 2019 12:43:57 +0000

This article contains HTML form design examples with code. It will help you style your HTML form and make all sorts of custom inputs.

To make an input, use the <input> tag. There is also a number of attributes that can be placed inside this tag.

The type attribute is useful to ensure the correct validation and work of inputs. This attribute can take different values:

type="checkbox" — for making checkboxes
type="email" — for email addresses (the multiple attribute can be added to email fields to select an email from a list of multiple email addresses)
type="file" — to upload files
type="radio" — for making radio inputs
type="range" — this input will be displayed as a graphical slider (there can be additional min, max, and step attributes)
type="tel" — for entering phone numbers
type="text" — for entering any text data
etc.

The placeholder attribute specifies a short hint that describes the expected value of an input field.

The name attribute specifies the name of an <input> element. It’s used to reference elements in JavaScript, to reference form data after a form is submitted, and to ensure the correct work of radio inputs. Only form elements with the name attribute will have their values passed when submitting a form.

The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.

Below are some examples.

Name input:

<input name="name" type="text" placeholder="Name" aria-label="Name" />

Phone input:

<input name="phone" type="tel" placeholder="Phone number" aria-label="Phone number" />

Email input:

<input name="email" type="email" placeholder="Email" aria-label="Email" multiple />

The <input> element is usually accompanied with the <label> tag that represents a caption for the input. To associate the <label> with an <input> element, you need to give the <input> an ID. The <label> then needs the for attribute whose value is the same as the input’s ID.

<label>Name 
    <input name="name" type="text" aria-label="Name" />
</label>

Basic Input Styling

All browsers apply their own styles to inputs. To reset those styles, you need to add these rules:

input {
  outline: none;
  user-select: none;
}

The outline: none; property removes the default outline of the input. And the user-select: none; property prevents the element to be highlighted if you click on it.

Next, you can apply your own styles: border, background, color, etc., as well as add pseudo-classes to control inputs styles in response to user actions. Here is an example:

input {
  border: 1px solid #a4a4a4;
  padding: 15px 20px;
  border-radius: 4px;
  width: 100%; // set width relatively to the parent container with fixed width
  margin-bottom: 10px;
  background: #f8f8ff;

  &:active, &:hover, &:focus {
    box-shadow: 2px 2px 5px 0px rgba(128,128,128,.7);
    transition: box-shadow .3s linear;
  }
}

Here is the result:

Range Input

A type="range" input will be displayed as a graphical slider. You can generate cross-browser compatible range inputs with custom styles.

First, prepare some basic markup:

<p>Set the range<span class="range-data">60%</span></p>
<input type="range" />

To override basic browser styles, you need to make your input “invisible”:

input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  width: 100%;
  border: none;
  padding: 0;
  background: transparent;

  &:focus {
    outline: none;
  }
}

Next, you need to style your range input’s thumb and track. The thumb is the thing that you drag along the track, and the track is the line that the thumb moves across. You need to add different styles for different browsers. Set the background (it can be an image), size, border-radius, etc.

input[type="range"] {
  // Chrome, Opera
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 24px; width: 24px;
    border-radius: 3px;
    background: url(images/range-thumb.png) no-repeat;
    cursor: pointer;
    margin-top: -10px;
  }

  // Firefox
  &::-moz-range-thumb {
    border: none;
    height: 24px; width: 24px;
    border-radius: 12px;
    background: #32557f;
    cursor: pointer;
    margin-top: -10px;
  }

 // IE
  &::-ms-thumb {
    border: none;
    height: 24px; width: 24px;
    background: #32557f;
    cursor: pointer;
    margin-top: 0;
  }
}

To style the track, you can also add rules for different browsers.

input[type="range"] {
  // Chrome, Opera
  &::-webkit-slider-runnable-track {
    width: 100%; height: 6px;
    border: 1px solid #FFF;
    border-radius: 3px;
    cursor: pointer;
    background: #a4a4a4;
  }

  // Firefox
  &::-moz-range-track {
    width: 100%; height: 6px;
    border: 1px solid #FFF;
    border-radius: 3px;
    cursor: pointer;
    background: #a4a4a4;
  }

  // IE
  &::-ms-track {
    width: 99%; height: 6px;
    cursor: pointer;
    border-color: transparent;
    color: transparent;
    border: 1px solid #FFF;
    border-radius: 3px;
    background: #a4a4a4;;
  }
}

If you apply those styles, your range input will look basically like this in Chrome and Opera (don’t forget to upload an image for the thumb):

Finally, you need to allow changing the digits in HTML (60%) when users drag the thumb. Here is the jQuery code for getting range input value and putting it inside HTML:

$('input[type=range]').val(60); // set initial value
$('.range-data').html( $('input[type=range]').val() + '%' ); // change HTML

$('input[type=range]').on('input', function() {
    $('.range-data').html( $(this).val() + '%' );
});

Checkbox Inputs

The type="checkbox" attribute will change your input into a checkbox.

Here is the markup:

<input type="checkbox" id="whale-shark" autofocus />
<label for="whale-shark">Whale Shark</label>

<input type="checkbox" id="basking-shark" checked />
<label for="basking-shark">Basking Shark</label>

<input type="checkbox" id="bull-shark" disabled />
<label for="bull-shark">Bull Shark</label>

<input type="checkbox" id="blue-shark" checked disabled />
<label for="blue-shark">Blue Shark</label>

Autofocus, checked, and disabled are attributes that allow styling checkboxes in different states (focus, checked, and disabled).

Now let’s make custom checkboxes. First, apply the display: block; property to your label elements if you want to make the checkboxes appear as a column. You can add the line-height property to determine the distance between the lines of checkboxes.

label {
  display: block;
  line-height: 1.8; 
}

To visually hide browser styling of checkboxes, you can add position and clip properties to your checkbox inputs.

input[type="checkbox"] {
  position: absolute;
  clip: rect(0,0,0,0); 
}

Now we will make our custom rectangular checkboxes with the help of width, height, and background properties. The text-indent property is required for the checkbox mark’s horizontal position, and the line-height is for the checkbox mark’s vertical align.

input[type="checkbox"] + label::before {
  content: '\a0';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: .5em;
  border-radius: .2em;
  background: #f8f8ff;
  text-indent: .25em;
  line-height: 1.4;
  border: 1px solid #555;
}

\2713 is a CSS symbol for the checkbox mark that will appear when the checkbox is checked:

input[type="checkbox"]:checked + label::before {
  content: '\2713';
  background: #32557f;
  color: #fff;
  transition: background .05s ease-out;
}

And here are other rules for focus and disabled states:

input[type="checkbox"]:focus + label::before {
  box-shadow: 0 0 .1em .1em #7eb4e2;
}

input[type="checkbox"]:disabled + label {
  color: #555;

  &::before {
    background: #a4a4a4;
    box-shadow: none;
    color: #555;
    cursor: not-allowed;
  }
}

This is how the final checkboxes will look like in different states (unchecked, checked, disabled, and checked-disabled):

To disable or enable elements of the form, add these lines to your JS file:

$ ('.class').on('click', function() { $('.anotherClass').prop('disabled', true); }); // To disable an element
$ ('.class').on('click', function() { $('.anotherClass').prop('disabled', false); }); //To enable an element

.class is an element which clicking event enables the disabled state of .anotherClass element.

Radio Inputs

Unlike checkboxes, only one radio input may be selected at a time. To make a radio input, add the type="radio" and name="anyname" attributes to the tag. Choose whatever name you like, but remember that the name attribute should be the same for each radio input that is not disabled. Otherwise, your radio inputs will be acting like checkboxes.

Here is the markup (<i> is added to style the radio circle):

<label>
    <input name="radio" type="radio" />
    <i></i><span>Whale Shark</span>
</label>

<label>
    <input name="radio" type="radio" checked />
    <i></i><span>Basking Shark</span>
</label>

<label>
    <input name="radio" type="radio" disabled />
    <i></i><span>Bull Shark</span>
</label>

<label>
    <input type="radio" checked disabled />
    <i></i><span>Blue Shark</span>
</label>

First, organize your radio inputs as a column with the margin-bottom: 5px (or whatever margin you like):

.radio {
  display: flex;
  flex-flow: column wrap;
}

label {
  margin-bottom: 5px;
}

Next, add rules for different states of the radio inputs (checked and disabled). And don’t forget the position:absolute property for your input.

input[type="radio"] {
  position: absolute;
  opacity: 0;

  &:checked + i::before {
    top: 5px;
    opacity: 1;
  }

  &:checked + i::after {
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
    background: #f8f8ff;
  }

  &:disabled + i {
    cursor: not-allowed;
  }

  &:disabled + i::before {
    background: #555;
  }

  &:disabled + i::after {
    background: #a4a4a4;
  }

  &:disabled ~ span {
    color: #555;
  }
}

Finally, do some styling for radio circles and dot marks (this is where your <i> element comes in handy).

i {
  position: relative;
  display: block;
  float: left;
  margin-right: 10px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  background: #4a4a4a;
  outline: none;
  border-radius: 50%;
  z-index: 0;

  &::after,
  &::before {
    content: "";
    position: absolute;
    display: block;
  }

  &::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #32557f;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    opacity: 0;
    z-index: 2;
  }

  &::after {
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
    background: #f8f8ff;
    border-radius: 50%;
    z-index: 1;
  }
}

Here is the result for radio inputs in different states (unchecked, checked, disabled, and checked-disabled):

Select Element

To make a select element, you can create the <select> tag and nest your options inside it. And don’t forget to add value attributes to <option> tag.

<select name="shark">
    <option value="Whale Shark">Whale Shark</option>
    <option value="Basking Shark">Basking Shark</option>
    <option value="Shortfin Mako Shark">Shortfin Mako Shark</option>
</select>

However, if you wish to apply really fancy styling, it would be easier to do without <select> and <option> tags. In this case, you can use simple <div> tags to style your select element.

Create a wrapper element (.select-wrap) and nest your select element with options inside. You can add .select and .options classes to divs intended for the select element and options. You can create an additional element to style a select arrow (.arrow). Also, you can wrap options with an additional <div> if you want to style the scrollbar (.options-container).

<div class="select-wrap">
    <div class="select">
        <span>Choose your shark</span><i class="arrow"></i>
    </div>
    <div class="options">
        <div class="options-container">
            <p>Whale Shark</p>
            <p>Basking Shark</p>
            <p>Shortfin Mako Shark</p>
            <p>Thresher Sharks</p>
            <p>Bull Shark</p>
            <p>Tiger Shark</p>
            <p>White Shark</p>
            <p>Oceanic Whitetip Shark</p>
            <p>Blue Shark</p>
            <p>Hammerhead Shark</p>
        </div>
   </div >
</div>

First, you should position your wrapper and select divs relatively. Also, you may want to add other styles such as width or height. Choose the fixed width for your wrapper div and 100% width for your .select div.

.select-wrap {
  position: relative;
  width: 100%;
}

.select {
  position: relative;
  width: 100%;
  height: 48px;
  cursor: pointer;
}

You can also add to .select other rules for the border, padding, border-radius, width, and other properties from the Basic Input section.

Next, you need to position your options absolutely and determine the top and left properties relatively to the .select div. The top property should correspond to the height of your .select div. After you finish styling, don’t forget to make your .options div invisible — it should open when you click on the .select div (we’ll be able to do it with the help of jQuery later). You can put this property inside comments for the time being to be able to see the result.

.options {
  // display: none;
  width: 100%;
  position: absolute;
  top: 48px; // = height of your .select div
  left: 0;
}

And here are other unimportant rules that you are free to change as you wish:

.options {
  width: 100%;
  border: 1px solid #32557f;
  border-radius: 0 0 4px 4px;
  background-color: rgba(39, 39, 51, .9);
  padding: 2px 3px 2px 16px;
  cursor: pointer;

  p {
    line-height: 1.9;
    color: #FFF;

    &:first-of-type {
      padding-top: 3px;
    }

    &:last-of-type {
      padding-bottom: 8px;
    }

    &:active,
    &:hover {
      color: #7eb4e2;
      transition: color .3s linear;
    }
  }
}

To make your div look like the true select element, you need to add an arrow to indicate that the div contains options. You can use the rules below to make a down-pointing arrow. The border and border-width properties will form the arrow shape, the position, top, and right properties will position the arrow inside the .select div, and the transform property will help to set the right direction for the arrow (down-pointing) by turning it by 45 degrees.

.arrow {
  display: inline-block;
  border: solid #555;
  border-width: 0 2px 2px 0;
  padding: 3px;
  position: absolute;
  top: 16px;
  right: 16px;
  transform: rotate(45deg);
}

After that, you need to style your .select div when it’s open with the options showing. You can add a new class (e. g. .select-open) and change the background-color, color, and other properties if you wish. You may also want to transform your down-pointing arrow into an up-pointing arrow by turning it by 135 degrees and slightly changing its positioning to make it look better.

.select-open {
  background-color: #32557f;
  border: 1px solid #32557f;
  border-radius: 4px 4px 0 0;
  color: #FFF;

  .arrow {
    // the first 5 properties don’t change
    border: solid #fff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    position: absolute;

    top: 20px; right: 16px; // to change the positioning
    transform: rotate(-135deg); // to make an up-pointing arrow
  }
}

If you want a triangle instead of an arrow, apply these rules to the .select::after div (for a down-pointing triangle):

.select::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #555;
  position: absolute;
  top: 20px;
  right: 16px;
}

Change border-top: 4px solid #555; to border-bottom: 4px solid #555; if you want to transform a down-pointing triangle to an up-pointing triangle.

Finally, you need to add a jQuery scenario to make your .select and .options divs behave like the true select and options. Add the following code to your JS file:

// To toggle options by clicking on .select div (show/hide options)
$('.select').click(function(e) {
    $('.options').toggle();
    $('.select').toggleClass('select-open'); // To add the class .select-open
    e.stopPropagation();
});

// To hide options when clicking on the document outside the .select div
$(document).click(function(e) {
    var $filter = $('.options');
    if (!$filter.is(e.target) && $filter.has(e.target).length === 0)    {
        $filter.hide();
        $('.select').removeClass('select-open');
    }
});

// To get options’ values and put them into .select div
$('.options p').click(function() {
    var optionVal = $(this).html();
    $('.select span').html(optionVal);
    $('.options').hide();
    $('.select').removeClass('select-open');
});

Optionally, you can style the scrollbar to make your options look better if there are too many of them. The important thing is to add the overflow-y: auto property to the div containing the options (.options-container). You may need to add different styles for different browsers.

Note that ::-webkit-scrollbar-track is the empty space below the progress bar and ::-webkit-scrollbar-thumb is the draggable scrolling element.

.options {
  scrollbar-color: #7eb4e2 #32557f;
  scrollbar-width: thin;

  // For IE
  scrollbar-base-color: #32557f;
  scrollbar-face-color: #7eb4e2;
  scrollbar-track-color: #32557f;
  scrollbar-arrow-color: #32557f;
  scrollbar-shadow-color: #7eb4e2;

  &-container {
    max-height: 180px;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 9px;
      background-color: transparent;

      &-track {
        border-radius: 3px;
        background-color: #32557f;
        margin: 2px 0 2px;
      }

      &-thumb {
        border-radius: 3px;
        background-color: #7eb4e2;
      }
    }
  }
}

Below is an example of how your final select element may look like (#1 is the select element before clicking and #2 is the select element with open options after clicking):

You can find more about styling different HTML elements on Sharkcoder.com.

CSS Shapes

Sharkcoder — Thu, 19 Sep 2019 12:40:17 +0000

This article includes examples of styling different shapes on CSS.

Border-Radius Property

The border-radius property is an important concept to understand before styling any CSS figures. It allows rounding corners of HTML elements. The curve for each angle is determined by one or two radii defining its shape — a circle or an ellipse. The radius extends to the entire background, even if the element has no borders.

The border-radius property allows rounding all corners of HTML elements at the same time. If you set two values for the border-radius property, the first value will round the upper left and lower right corners, and the second one will round the upper right and lower left corners. You can use px, em, % or other units to set values.

By using the border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius properties, you can round each corner in its own way.

The values separated by the slash (/) symbol define the horizontal and vertical radii.

Below are some examples of shapes with different border radii.




.shape1 { border-radius: 15px; }
.shape2 { border-top-left-radius: 15px; }
.shape3 { border-top-right-radius: 15px; }
.shape4 { border-bottom-left-radius: 15px; }
.shape5 { border-bottom-right-radius: 15px; }
.shape6 { border-radius: 0 0 15px 15px; }
.shape7 { border-radius: 15px 15px 0 0; }
.shape8 { border-radius: 0 10px 20px; }
.shape9 { border-radius: 10px 20px; }
.shape10 { border-radius: 10px/20px; }
.shape11 { border-radius: 5px 10px 15px 30px/30px 15px 10px 5px; }
.shape12 { border-radius: 10px 20px 30px 40px/30px; }

.shape {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 5px solid #32557f;
}

There are online instruments to play with different border radii: Link 1, Link 2.

Circle

A circle is the simplest CSS shape. Apply the border-radius: 50%; property to an element with identical width and height, and you’ll get a circle.




.circle {
  background: #32557f;
  width: 200px;
  height: 200px;
  border-radius: 50%; 
}

Ovals/Ellipses

Ovals are made in the same way as circles. The only difference is that ovals’ width should be different from its height.




.ellipse {
  background: #32557f;
  width: 200px;
  height: 100px;
  border-radius: 50%;
}

Half-Ellipses

To make half-ellipses, use sets of values separated by the slash (/) symbol to define the horizontal and vertical radii. If you put 50% before the slash symbol, you will get a vertical half-ellipse. And if you put 50% after the slash symbol, you’ll get a horizontal half-ellipse. Combinations of 0 and 100% values define the direction of your half-ellipse. See the examples below.




.half-ellipse1 { border-radius: 50% / 100% 100% 0 0; }
.half-ellipse2 { border-radius: 50% / 0 0 100% 100%; }
.half-ellipse3 { border-radius: 100% 0 0 100% / 50%; }
.half-ellipse4 { border-radius: 0 100% 100% 0 / 50%; }

.half-ellipse {
  background: #32557f;
  width: 150px;
  height: 75px;
}

Triangles

CSS triangles are useful to create arrows, for example, in a select element or inside buttons.

To make a triangle, create a box with zero width and height.




.triangle {
  width: 0;
  height: 0;
}

The actual width and height of the arrow are determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.




.triangle .triangle-up {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #32557f;
}

.triangle .triangle-down {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #32557f;
}

.triangle .triangle-left {
  border-top: 50px solid transparent;
  border-right: 100px solid #32557f;
  border-bottom: 50px solid transparent;
}

.triangle .triangle-right {
  border-top: 50px solid transparent;
  border-left: 100px solid #32557f;
  border-bottom: 50px solid transparent;
}

To make a right triangle (a right-angled triangle), make the top or bottom colored and leave the right or left border transparent.




.triangle .triangle-top-left {
  border-top: 100px solid #32557f;
  border-right: 100px solid transparent;
}

.triangle .triangle-top-right {
  border-top: 100px solid #32557f;
  border-left: 100px solid transparent;
}

.triangle .triangle-bottom-left {
  border-bottom: 100px solid #32557f;
  border-right: 100px solid transparent;
}

.triangle .triangle-bottom-right {
  border-bottom: 100px solid #32557f;
  border-left: 100px solid transparent;
}

Arrows

To create a simple arrow without a tail, make a box with a width and height, border, as well as zero left and top borders.




.arrow {
  width: 15px;
  height: 15px;
  border: 2px solid #32557f;
  border-left: 0;
  border-top: 0;
}

To make an up arrow, add the transform: rotate(225deg); property, and to make a down arrow, add the transform: rotate(45deg); property to rotate the arrow to 225 and 45 degrees respectively.




.arrow-up { transform: rotate(225deg); }
.arrow-down { transform: rotate(45deg); }

You can also make a curved arrow with a tail:




.arrow-curved {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid #32557f;
  transform: rotate(10deg);

  &:after {
    content: "";
    position: absolute;
    border: 0 solid transparent;
    border-top: 3px solid #32557f;
    border-radius: 20px 0 0 0;
    top: -12px;
    left: -9px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
  }
}

And below is an example of how to create an arrow-pointer:




.arrow-pointer {
  width: 250px;
  height: 50px;
  background: #32557f;
  position: relative;

  &:after {
    content: '';
    position: absolute;
    left: 0; bottom: 0; width: 0; height: 0;
    border-left: 25px solid #7eb4e2;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
  }

  &:before {
    content: '';
    position: absolute;
    right: -25px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 25px solid #32557f;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
  }
}

You can find more shapes examples on sharkcoder.com