搜索
搜索

如何将按钮变成下拉菜单？

debugcn 发表于 Dev
16
用户200291

我希望能够单击图标并下拉两个选项以从中选择并将输入框中的占位符更改为用户选择的内容。

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:hover,
a:active {
  outline: 0;
}

button,
input {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  *overflow: visible;
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button {
  -webkit-appearance: button;
  cursor: pointer;
}

button {
  cursor: pointer;
}

@media print {
  * {
    text-shadow: none!important;
    color: #000!important;
    background: transparent!important;
    box-shadow: none!important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  a[href^="javascript:"]:after {
    content: "";
  }
}

a {
  color: #188252;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #188252;
  text-decoration: underline;
}

form {
  margin: 0 0 18px;
}

input,
button {
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
}

input,
button {
  font-family: 'Roboto', Arial, sans-serif;
}

input[type="text"] {
  display: inline-block;
  height: 18px;
  padding: 4px 6px;
  margin-bottom: 9px;
  font-size: 13px;
  line-height: 18px;
  color: #555;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  vertical-align: middle;
}

input {
  width: 206px;
}

input[type="text"] {
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear .2s, box-shadow linear .2s;
  -moz-transition: border linear .2s, box-shadow linear .2s;
  -o-transition: border linear .2s, box-shadow linear .2s;
  transition: border linear .2s, box-shadow linear .2s;
}

input[type="text"]:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
}

input:-moz-placeholder {
  color: #999;
}

input:-ms-input-placeholder {
  color: #999;
}

input::-webkit-input-placeholder {
  color: #999;
}

input {
  margin-left: 0;
}

input:focus:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}

input:focus:invalid:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}

@media (min-width: 768px) and (max-width: 979px) {
  input {
    margin-left: 0;
  }
}

@media (min-width: 1200px) {
  input {
    margin-left: 0;
  }
}

[class^="icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: .25em;
  line-height: 14px;
}

[class^="icon-"]:before {
  font-family: 'IcoMoon';
  font-style: normal;
  speak: none;
}

.icon-arrow-down-3:before {
  content: "\e011";
}

.icon-search:before {
  content: "\53";
}

@media (max-width: 768px) {
  .header-search form {
    margin: 0;
  }
}

a {
  color: #188252;
}

@media print {
  a[href]:after {
    content: ""!important;
  }
}

form#searchform {
  margin: 0;
}

.searchbar {
  width: 100%;
  position: relative;
}

#searchterm {
  box-sizing: border-box;
  height: 42px;
  width: 100%;
  border: 3px solid #188252;
  outline: 0px none;
  margin: 0px;
  padding: 4px 42px 4px 8px;
  color: #555;
  background-color: #FFF;
  vertical-align: top;
  font-size: 18px;
  border-radius: 8px 0 0 8px;
}

div.searchselect {
  position: absolute;
  display: inline-block;
  height: 42px;
  vertical-align: top;
  margin: 0;
  top: 0px;
  right: 44px;
}

div.searchform {
  position: absolute;
  top: 99%;
  right: -2px;
  width: auto;
  white-space: nowrap;
  display: none;
  border: 0;
  margin: 0;
  padding: 0;
  outline: 0;
  vertical-align: top;
  z-index: 10000;
  background-color: #fff;
  border-bottom: 1px solid rgba(220, 220, 220, 1);
  border-right: 1px solid rgba(220, 220, 220, 1);
  border-left: 1px solid rgba(220, 220, 220, 1);
  box-shadow: 0 0.3rem .5rem -0.111rem rgba(0, 0, 0, 0.15);
}

div.searchform a {
  display: block;
  font-size: 14px;
  color: #555;
  padding: 8px;
  outline: 0;
}

div.searchform a:hover,
div.searchform a:active,
div.searchform a:focus {
  text-decoration: none;
  ;
  background-color: #f1f1f1;
}

.expandsearchform {
  position: absolute;
  left: -24px;
  height: 42px;
  width: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 40px;
  font-size: 34px;
  text-align: center;
  cursor: pointer;
  color: #188252;
  background-color: transparent;
  box-shadow: none;
}

.expandsearchform:hover,
.expandsearchform:focus {
  color: #666;
}

.expandsearchform i.icon-arrow-down-3 {
  position: absolute;
  right: 10px;
  top: 16px;
}

.searchbar button.searchsubmit {
  width: 42px;
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  background-color: #188252;
  border: 0;
  font-size: 18px;
  line-height: 42px;
  height: 42px;
  width: 42px;
  margin-left: 0px;
  top: 0px;
  color: #fff;
}

.searchbar button.searchsubmit:hover,
.searchbar button.searchsubmit:focus {
  color: #def2e9;
}

a,
.searchbar button.searchsubmit {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

a:active,
a:focus {
  outline: 0;
}


/*! CSS Used fontfaces */

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xMIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xEIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xLIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xHIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xGIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc3CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc-CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc2CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc5CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc1CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc0CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ACc6CsTYl4BO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic3CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic-CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic2CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic5CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic1CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic0CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IcoMoon';
  src: url('http://.info/media/jui/fonts/IcoMoon.eot');
  src: url('http://.info/media/jui/fonts/IcoMoon.eot#iefix') format('embedded-opentype'), url('http://gailborden.info/media/jui/fonts/IcoMoon.woff') format('woff'), url('http://gailborden.info/media/jui/fonts/IcoMoon.ttf') format('truetype'), url('http://.info/media/jui/fonts/IcoMoon.svg#IcoMoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
<div class="search-container">
  <form id="searchform" name="searchform" action="" method="get" role="search">
    <div class="searchbar"><input name="searchType" value="smart" type="hidden" /> <input type="text" form="searchform" id="searchterm" name="query" value="" placeholder="Search the catalog" />
      <div class="searchselect">
        <div class="expandsearchform" class="dropdown-content"><i class="fa fa-caret-down">&nbsp;</i>
        </div>
      </div>
      <button class="searchsubmit"><i class="fa fa-search">&nbsp;</i></button></div>
  </form>
</div>
<p>
  drop down should have two options, website and catalog. placeholder in input box should change accordingly.
</p>

这

您可以检查单击的元素（当下拉列表打开时）是否是a标记元素之一（来自下拉列表），然后更新 searchinput的占位符。

因此myFunction自暴自弃，千万不要忘了送event的onclick属性中HTML，像这样onclick="myFunction(event)"：

function myFunction(e) {
  console.log('click');
  document.getElementById("myDropdown").classList.toggle("show");
  /** if that's an "a" tag that was clicked use its text as the placeholder **/
  e.target.tagName.toUpperCase() === 'A' && document.getElementById('searchterm').setAttribute('placeholder', e.target.textContent);
}

对不起，我无法制作可运行的代码段，因为代码（来自 jsfiddle 链接）很乱，但我做了一支笔来查看最终结果。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将Bootstrap下拉菜单与触发按钮对齐

来自分类Dev

下拉菜单，选择后将选项变成按钮

来自分类Dev

如何将按钮的下拉菜单扩展到左侧？

来自分类Dev

如何将下拉菜单更改为下拉菜单

来自分类Dev

如何将下拉菜单更改为下拉菜单

来自分类Dev

如何将导航链接移到下拉菜单中

来自分类Dev

如何将导航集中在下拉菜单上？

来自分类Dev

如何将下拉菜单项居中？

来自分类Dev

将单选按钮与下拉菜单组合

来自分类Dev

如何将表格（两个下拉菜单和一个按钮）放在一行的中心

来自分类Dev

如何将Bootstrap下拉样式应用于MVC剃刀中的下拉菜单

来自分类Dev

如何将选项选项卡式菜单添加到大型下拉菜单？

来自分类Dev

如何将Swagger UI的参数设置为下拉菜单而不是文本输入

来自分类Dev

如何将下拉菜单中的数据插入数据库中的新表？

来自分类Dev

情节：如何将下拉菜单与pandas数据框一起使用？

来自分类Dev

如何将下拉菜单内容悬停在左侧导航的右侧

来自分类Dev

如何将滚动条添加到下拉菜单？

来自分类Dev

如何将导航下拉菜单从悬停更改为单击

来自分类Dev

如何将下拉菜单添加到嵌入式SwiftUI NavigationBarTitle中？

来自分类Dev

如何将wp_nav_menu（）WordPress与Bootstrap下拉菜单布局集成

来自分类Dev

如何将 Bootstrap 的下拉菜单定位到浮动右侧切换元素的右侧？

来自分类Dev

Foundation 6.4.1 - 如何将下拉菜单置于其父级之下？

来自分类Dev

如何将 jQuery 脚本用于表单中的多个选择类型下拉菜单？

来自分类Dev

如何将下拉菜单从悬停更改为 onclick

来自分类Dev

如何将最后记录的值设置为微调下拉菜单？

来自分类Dev

如何将一个：悬停颜色添加到 AMP 下拉菜单

来自分类Dev

将输入和按钮放在下拉菜单中

来自分类Dev

Bootstrap：下拉菜单与按钮下拉菜单

来自分类Dev

如何使下拉菜单的宽度与触发按钮的宽度相同

Related 相关文章

  1. 1

    如何将Bootstrap下拉菜单与触发按钮对齐

  2. 2

    下拉菜单，选择后将选项变成按钮

  3. 3

    如何将按钮的下拉菜单扩展到左侧？

  4. 4

    如何将下拉菜单更改为下拉菜单

  5. 5

    如何将下拉菜单更改为下拉菜单

  6. 6

    如何将导航链接移到下拉菜单中

  7. 7

    如何将导航集中在下拉菜单上？

  8. 8

    如何将下拉菜单项居中？

  9. 9

    将单选按钮与下拉菜单组合

  10. 10

    如何将表格（两个下拉菜单和一个按钮）放在一行的中心

  11. 11

    如何将Bootstrap下拉样式应用于MVC剃刀中的下拉菜单

  12. 12

    如何将选项选项卡式菜单添加到大型下拉菜单？

  13. 13

    如何将Swagger UI的参数设置为下拉菜单而不是文本输入

  14. 14

    如何将下拉菜单中的数据插入数据库中的新表？

  15. 15

    情节：如何将下拉菜单与pandas数据框一起使用？

  16. 16

    如何将下拉菜单内容悬停在左侧导航的右侧

  17. 17

    如何将滚动条添加到下拉菜单？

  18. 18

    如何将导航下拉菜单从悬停更改为单击

  19. 19

    如何将下拉菜单添加到嵌入式SwiftUI NavigationBarTitle中？

  20. 20

    如何将wp_nav_menu（）WordPress与Bootstrap下拉菜单布局集成

  21. 21

    如何将 Bootstrap 的下拉菜单定位到浮动右侧切换元素的右侧？

  22. 22

    Foundation 6.4.1 - 如何将下拉菜单置于其父级之下？

  23. 23

    如何将 jQuery 脚本用于表单中的多个选择类型下拉菜单？

  24. 24

    如何将下拉菜单从悬停更改为 onclick

  25. 25

    如何将最后记录的值设置为微调下拉菜单？

  26. 26

    如何将一个：悬停颜色添加到 AMP 下拉菜单

  27. 27

    将输入和按钮放在下拉菜单中

  28. 28

    Bootstrap：下拉菜单与按钮下拉菜单

  29. 29

    如何使下拉菜单的宽度与触发按钮的宽度相同

热门标签

归档