quick-start
wm-atomic-docs
installation
css-classes
colors
colors-row-themes
javascript-modules
row-components
git-usage
git-fixing-mistakes
git-cheatsheet
how-tos
site-structure
site-variables
bem-resources
sass-resources
link-elements
list-elements
normalize
fancybox
print
cheatsheet-functions-and-mixins
function-color
function-font
function-px-to-rem
function-remove-unit
function-spacing
mixin-banner-heights
mixin-breakpoints
mixin-button-styles
mixin-color-theme
mixin-fluid-anything
mixin-link-styles
mixin-menu-open-closed-styles
mixin-right-arrow
mixin-social-media-icons
wm-breakpoints
breakpoint-cheatsheet
wm-colors
vims-colors
wm-font-families
wm-spacing
wm-widths-and-heights
wm-z-indexes
wm-border
wm-element-styles
location-array
heading-specs
listing-specs
background-image
heights
switch
sr-only
theme-colors
wm-helper-min-js
wm-plugins-js
wm-shortcodes-js
perfect-scrollbar
wm-main-js
wm-secondary-js
adjust-row-card-height
event-row-js
news-feed-js
tiny-slider-js
wm-row-slideshow-js
global
headings
text-treatments
buttons
links
lists
tables
forms
images
svg-caret-white
wm-row-base-component
wm-split-layout-component
wm-row-buttons
wm-cards-component
wm-description-text-component
wm-card-component
wm-text-card-component
wm-image-card
wm-statnum-component
themes
listing-layout
main-layout
sharebar
alert
boxcopy
breadcrumbs
broadcast-bar
buttons-wm
bxSlider
default-extra-announcements
default-extra-events
default-extra-features
default-extra-news
directory-with-photo-grid
dropdown
emergency-info
figure
figure-responsive
figure-icon
galleria-gallery-slideshow
header
horiz-nav
lightbox
lightbox-content
listing-page-item
news-home-latest-news
news-home-top-stories
photoset
rrssb
search-form
search-results
sidebar-listboxes
sidebar-news-events-rss
sidebar-news-home-video
sidebar-news-press-releases
sidebar-news-wminthenews
sidebar-widgets
table-collapsible
tables-wm
text
wysiwg-photos
youtube-embeds
examples-listboxes-widgets
examples-listings
examples-headings
-user-content-styles
announcement-content
atoz-listing
campus-map-content
content-page-content
directory-content
_experts-content
feature-page-content
full-page-content
gallery-page-content
gateway-page-content
grid-classic
grid-classic-right-col
grid-classic-rows
grid-classic-multisize
grid-classic-multisize-right-col
grid-flow
grid-flow-right-col
grid-flow-titles
grid-flow-captions
_ideation-story-content
_ideation-story-header-content
listing-page-announcements
listing-page-children
listing-page-directory
listing-page-features
listing-page-files
listing-page-news-stories
listing-page-portfolio
multimedia-grid-content
news-home
news-story-content
portfolio
row
sidebar
slideshow-research
tr-form-content
youtube-playlist
embed-row
button-bar-row
_base-row
accordion-list-row
announcements-row
callout
contact-place
content-row
events
fiftyfifty
icons
links-row
news-feed-row
search-row
statistics
video-feature
homepage-hero
homepage-admission
homepage-programs
homepage-stats
topbar-logo-homepage
menu-banner
topbar-logo-section
topbar
banner
banner-medium
banner-tall
banner-super
chosen
footer
info-for-menu
page-nav
page-nav-ideation
page-nav-news
page-nav-social-buttons
site-menu
AtoZ-Listing-template
Campus-Map-Location-template
Content-Page-template
_Experts-Page-template
Feature-Page-template
Full-Page-template
Gallery-Page-template
Gateway-Page-template
Gateway-Page-left-nav-template
_Ideation-story-template
Landing-Page-template
Multimedia-Grid-template
News-Media-Home-template
News-Story-template
Slideshow-Page-template
Paste-N-Test-template
WM-Homepage-template
Announcement
AtoZ-Listing
Campus-Map-Location
Content-Page
Content-Page-2-Columns
Content-Page-Grid-all-versions
Content-Page-Grid-Classic
Content-Page-Grid-Masonry
Directory-Page
_Experts-Page
Feature-Page
Full-Page
Gallery-Page
Gateway-Page
Gateway-Page-left-nav
_Ideation-Story
Landing-Page
Listing-Page-Announcements
Listing-Page-Children
Listing-Page-Directory
Listing-Page-Features
Listing-Page-Files
Listing-Page-News-Stories
Listing-Page-Portfolio
Multimedia-Grid
_News-Media-Home
News-Story
Portfolio-Page
Slideshow-Page
YouTube-Playlist
Paste-N-Test
WM-Homepage
wm-cheatsheet
vims-cheatsheet
6-page-content-elements
edit
dropdown
edit
dropdown and submit button
Abegaz, Berhanu
Abelt, Christopher
Aday, Jr., David P.
Allar, Matthew
Allen, Jonathan
Archibald, Bob
Armstrong, David
Arries, Jonathan F.
Atanasov, Vladimir
Averett, Todd
Bailey, Christopher "Chuck"
HTML
Output
SCSS
Add a javascript file
Expand
Copy
Edit
<!-- components/6-page-content-elements/dropdown.php --> <form id="expert_name_search" action=""> <div class="m-dropdown"> <input type="hidden" name="s_type" value="name"> <select class="m-dropdown__options" name="s_term" id="expert_name_search_value"> <option value="bxabeg">Abegaz, Berhanu</option> <option value="cjabel">Abelt, Christopher</option> <option value="dpaday">Aday, Jr., David P.</option> <option value="mjallar">Allar, Matthew</option> <option value="jdallen">Allen, Jonathan</option> <option value="rbach">Archibald, Bob</option> <option value="dsarms">Armstrong, David</option> <option value="jfarri">Arries, Jonathan F.</option> <option value="vaatan">Atanasov, Vladimir</option> <option value="tdaver">Averett, Todd</option> <option value="cmbail">Bailey, Christopher "Chuck"</option> </select> <input class="m-dropdown__submit" type="submit" name="search_by_name" value="Go"> </div> </form>
Copy
Copy
Edit
/* scss/6-page-content-elements/_dropdown.scss */ .m-dropdown__submit { min-width: 2.132rem; padding: 0.35533rem; line-height: 1em; } .m-dropdown__submit { color: black; border: $border-width solid $border-color; background-color: var(--color-wmsilver-0); }