Scope Bar

Developer
Alan Shortis
Size
2,590 Kb
Views
14,168
  1. Scope Bar Previews
  2. Scope Bar HTML Codes
  3. Scope Bar CSS Codes

How do I make an scope bar?

What is a scope bar? How do you make a scope bar? This script and codes were developed by Alan Shortis on 14 November 2022, Monday.

Scope Bar Previews
IQ Test

Scope Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scope Bar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="scope-bar"> <li class="scope-bar__item"> <input class="scope-bar__radio" type="radio" name="view" id="view-text" value="text" checked="checked"> <label class="scope-bar__item-label" for="view-text">Text</label> </input> </li> <li class="scope-bar__item"> <input class="scope-bar__radio" type="radio" name="view" id="view-trans" value="transcript"> <label class="scope-bar__item-label" for="view-trans">Transcript</label> </input> </li>
</ul>
</body>
</html>

Scope Bar - Script Codes CSS Codes

@import "https://fonts.googleapis.com/css?family=Roboto:300";
*, *:before, *:after { box-sizing: border-box;
}
html, body { height: 100%;
}
body { display: flex; justify-content: center; align-items: center; font-size: 16px; font-family: Roboto; font-weight: 300; background: #333;
}
.scope-bar { display: table; table-layout: fixed; list-style-type: none; margin: 0; padding: 0; text-transform: uppercase;
}
.scope-bar__item { display: table-cell; min-width: 100px; overflow: hidden;
}
.scope-bar__item:first-of-type > label { border-radius: 3px 0 0 3px;
}
.scope-bar__item:last-of-type > label { border-radius: 0 3px 3px 0;
}
.scope-bar__item-label { display: block; cursor: pointer; padding: 3px; border: 1px solid #ff5252; font-size: .75rem; text-align: center; color: white; background: transparent; transition: background 200ms ease;
}
.scope-bar__radio { display: none;
}
.scope-bar__radio:checked + label { background: #ff5252;
}
Scope Bar - Script Codes
Scope Bar - Script Codes
Home Page Home
Developer Alan Shortis
Username alanshortis
Uploaded November 14, 2022
Rating 3
Size 2,590 Kb
Views 14,168
Do you need developer help for Scope Bar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alan Shortis (alanshortis) Script Codes
Name
CSS Tooltips
2D fluid image
A Pen by Alan Shortis
Single div CSS loaders
Responsive Grid
Orb 2
Shaft of Light
Toggle Buttons
Overlapping Circles
List filter toggle thing
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!