filters input fields ok for members. Still need a dropdown

src/page-members.pug

@@ -22,13 +22,16 @@ div.grid-layer
       widget-foaf:hompage='hdapp-hyperlink',
       widget-roles='sib-display-lookuplist',
       widget-skills='sib-display-lookuplist',
-      set-name='pseudo,user.first_name,user.last_name',
-      search-fields='name, skills, roles',
-      search-range-skills=`${sdn}/skills/`,
       search-range-roles=`${sdn}/role/`,
-      search-label-skills='competences',
+      search-range-skills=`${sdn}/skills/`,
+      search-fields='name, roles, skills',
+      set-name='pseudo,user.first_name,user.last_name',
       search-label-name='Search by lastname, firstname...',
+      search-label-roles='Filter by role',
+      search-label-skills='Search by skills',
       search-widget-name='sib-form-placeholder-text',
+      search-widget-roles='sib-form-placeholder-text',
+      search-widget-skills='sib-form-placeholder-text',
       next='member')
   div.grid-layer-links.containerV
     div.containerH.containerCenter.how-link

src/styles/filters.scss

@@ -1,8 +1,7 @@
 %filters {
-  background-color: orchid;
   border-bottom: 1px solid $color-grey1;
   display: grid;
-  grid-gap: 0px 30px;
+  grid-gap: 0px 15px;
   grid-template-columns: 50% auto;
   padding-bottom: 3em;
 
@@ -17,7 +16,7 @@
     font-size: 85%;
     line-height: 1.80;
     margin-top: 1em;
-    width: 90%;
+    width: 95%;
     -moz-appearance: none;
     -webkit-appearance: none;
     

src/styles/main.scss

@@ -280,14 +280,12 @@ sib-trigger.back {
   grid-template-rows: [start]13em[middle]auto[end];
 }
 .grid-layer-main {
-  background-color: aqua;
   grid-column-start: start;
   grid-column-end: end;
   grid-row-start: start;
   grid-row-end: end;
 }
 .grid-layer-links {
-  background-color: pink;
   grid-column-start: middle;
   grid-column-end: end;
   grid-row-start: start;