LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code








CSS
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);
* {
  box-sizing: border-box;
}

form {
  margin: 30px auto 110px;
}

.search_bar {
  background: #fff;
  border: #b7b7b7 solid 1px;
  border-radius: 3px;
  box-shadow: 0 0 3px #ccc;
  position: relative;
  font-family: 'Source Sans Pro', sans-serif;
  max-width: 420px;
}
.search_bar input[type=text] {
  border: none;
  box-shadow: none;
  font-weight: 600;
  font-size: 14px;
  width: 80%;
  padding: .5em;
  margin: 0;
  overflow: hidden;
}
.search_bar input[type=text]:focus {
  outline: none;
}
.search_bar button[type=submit] {
  background: -webkit-linear-gradient(#237cd4, #1e6ab5);
  background: linear-gradient(#237cd4, #1e6ab5);
  color: rgba(255, 255, 255, 0);
  border: 1px solid #1C62A8;
  width: 10%;
  min-width: 56px;
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 0 3px 3px 0;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.search_bar button[type=submit]:after {
  content: '';
  position: absolute;
  top: 18%;
  right: 0;
  bottom: 22%;
  left: 4%;
  background: url("http://media.lib.byu.edu/assets/images/searchbar/1.0/search-icon.svg") no-repeat center center;
  background-size: contain;
}
.search_bar button[type=submit]:hover, .search_bar button[type=submit]:focus {
  background: -webkit-linear-gradient(#3388dd, #2174c7);
  background: linear-gradient(#3388dd, #2174c7);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.search_bar .search_dropdown {
  font-weight: 600;
  min-width: 17px;
  background: -webkit-linear-gradient(#f4f4f4, #e2e2e2);
  background: linear-gradient(#f4f4f4, #e2e2e2);
  border-right: 1px solid #ddd;
  color: #555;
  padding: 0 28px 0 13px;
  border-radius: 2px 0 0 2px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 10000;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  box-sizing: content-box;
}
.search_bar .search_dropdown:after {
  content: "\2193";
  color: rgba(85, 85, 85, 0);
  background: url("http://media.lib.byu.edu/assets/images/searchbar/1.0/down-arrow.svg") no-repeat top left;
  height: 8px;
  width: 10px;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -6px;
}
.search_bar .search_dropdown:hover, .search_bar .search_dropdown.active {
  background: -webkit-linear-gradient(#e7e7e7, #d5d5d5);
  background: linear-gradient(#e7e7e7, #d5d5d5);
  cursor: pointer;
  border-right-color: #ccc;
}
.search_bar .search_dropdown > span {
  position: absolute;
  top: 50%;
  margin-top: -8px;
  white-space: nowrap;
  font-size: 15px;
}
.search_bar .search_dropdown ul {
  display: none;
  position: absolute;
  top: 105%;
  left: -1px;
  font-size: 14px;
  width: 225px;
  background: #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 7px 0;
}
.search_bar .search_dropdown li {
  list-style-type: none;
  margin: 0;
  padding: 5px 18px;
  color: #1C62A8;
  line-height: 1.2em;
  position: relative;
}
.search_bar .search_dropdown li:hover {
  background: #e7e7e7;
}
.search_bar .search_dropdown li.selected {
  background: #1C62A8;
  color: #fff;
}
.search_bar.small {
  max-width: 300px;
}
.search_bar.small input[type=text] {
  font-size: 13px;
}
.search_bar.large {
  max-width: 560px;
}
.search_bar.large input[type=text] {
  font-size: 16px;
}
.search_bar.larger {
  max-width: 700px;
}
.search_bar.larger input[type=text] {
  font-size: 18px;
}
.search_bar.huge {
  max-width: 860px;
}
.search_bar.huge input[type=text] {
  font-size: 21px;
}
.search_bar ::-webkit-input-placeholder {
  font-weight: 400;
}
.search_bar ::-moz-placeholder {
  font-weight: 400;
}
.search_bar :-ms-input-placeholder {
  font-weight: 400;
}
.search_bar ::placeholder {
  font-weight: 400;
}
JS
/* Search bar */

var resizeElements;

$(document).ready(function() {

  // Set up common variables
  // --------------------------------------------------

  var bar = ".search_bar";
  var input = bar + " input[type='text']";
  var button = bar + " button[type='submit']";
  var dropdown = bar + " .search_dropdown";
  var dropdownLabel = dropdown + " > span";
  var dropdownList = dropdown + " ul";
  var dropdownListItems = dropdownList + " li";


  // Set up common functions
  // --------------------------------------------------

  resizeElements = function() {
    var barWidth = $(bar).outerWidth();

    var labelWidth = $(dropdownLabel).outerWidth();
    $(dropdown).width(labelWidth);

    var dropdownWidth = $(dropdown).outerWidth();
    var buttonWidth	= $(button).outerWidth();
    var inputWidth = barWidth - dropdownWidth - buttonWidth;
    var inputWidthPercent = inputWidth / barWidth * 100 + "%";

    $(input).css({ 'margin-left': dropdownWidth, 'width': inputWidthPercent });
  }

  function dropdownOn() {
    $(dropdownList).fadeIn(25);
    $(dropdown).addClass("active");
  }

  function dropdownOff() {
    $(dropdownList).fadeOut(25);
    $(dropdown).removeClass("active");
  }


  // Initialize initial resize of initial elements 
  // --------------------------------------------------
  resizeElements();


  // Toggle new dropdown menu on click
  // --------------------------------------------------

  $(dropdown).click(function(event) {
    if ($(dropdown).hasClass("active")) {
      dropdownOff();
    } else {
      dropdownOn();
    }

    event.stopPropagation();
    return false;
  });

  $("html").click(dropdownOff);


  // Activate new dropdown option and show tray if applicable
  // --------------------------------------------------

  $(dropdownListItems).click(function() {
    $(this).siblings("li.selected").removeClass("selected");
    $(this).addClass("selected");

    // Focus the input
    $(this).parents("form.search_bar:first").find("input[type=text]").focus();

    var labelText = $(this).text();
    $(dropdownLabel).text(labelText);

    resizeElements();

  });


  // Resize all elements when the window resizes
  // --------------------------------------------------

  $(window).resize(function() {
    resizeElements();
  });
});
Host Instantly Drag and Drop Website Builder

 

Description

Search bar + dropdown. The goal was to create a search bar that could adjust in size by changing as little CSS as possible for each size. In this case, changing the font-size on the text input will cause the rest of the search box (button, dropdown, etc... to resize with it). It also helps to adjust the width of search bar itself as you increase the font-size of the input to get a balanced look.
Term
Mon, 11/27/2017 - 22:03

Related Codes

Pen ID
Pen ID
Pen ID