Home Explore Help
Register Sign In
theenglishway-utils
/
css-sandbox
Watch 2
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Add "Choices" library

theenglishway (time) 6 years ago
parent
1c1f149e35
commit
a0d7965743
2 changed files with 36 additions and 1 deletions
Split View Show Diff Stats
  1. 9 1
      form/form.html
  2. 27 0
      form/select.css

+ 9 - 1
form/form.html
View File 

@@ -5,12 +5,16 @@
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+  <!-- Include Choices CSS -->
 
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
 
+  <!-- Include Choices JavaScript -->
 
+  <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
 
   <link rel="stylesheet" href="normalize.css">
 
   <link rel="stylesheet" href="style.css">
 
   <title>Document</title>
 
 </head>
 
 
-<body class="body-- nodebug">
 
+<body class="body-- odebug">
 
   <h1>Full-page form (flexbox fields)</h1>
 
   <form class="form form--full-page" action="#" method="post">
 
     <h1 class="form__title">Form title</h1>
 
@@ -169,4 +173,8 @@
 
   </form>
 
 </body>
 
 
+<script>
 
+  const choices = new Choices('select', { classNames: { containerOuter: 'choices field__input' } })
 
+</script>
 
+
 
 </html>

+ 27 - 0
form/select.css
View File 

@@ -5,4 +5,31 @@
 
 
 .select__option {
 
 
+}
 
+
 
+/* Override some Choices.js defaults */
 
+.choices {
 
+  margin-bottom: 0px;
 
+  font-size: inherit;
 
+}
 
+
 
+.choices__list--multiple .choices__item {
 
+  font-size: inherit;
 
+}
 
+
 
+/* Actual styling */
 
+.choices__list--multiple {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+}
 
+
 
+.choices__list--multiple .choices__item {
 
+  background-color: maroon;
 
+  border: 1px solid maroon;
 
+  color: #fff;
 
+}
 
+
 
+.choices__list--multiple .choices__item.is-highlighted {
 
+  background-color: #00a5bb;
 
+  border: 1px solid #008fa1;
 
 }