如何使用 amp-selector 绑定多个值？

Question

您如何使用 amp-selector 显示多个 selected 选项的结果？

例如在下面的代码中，

如果您 select 美国和欧洲，列表应显示：

美国
美国
美国和欧洲
欧洲
欧洲
澳大利亚&美国&欧洲

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>MultiSelect</title>
  <link rel="canonical" href="amps.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>


  <!-- AMP Components -->
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <script async custom-element="amp-bind"src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

  <style amp-custom>
    /*** uncss> filename: https://code.getmdl.io/1.3.0/material.indigo-pink.min.css ***/
    /**
     * material-design-lite - Material Design Components in CSS, JS and HTML
     * @version v1.3.0
     * @license Apache-2.0
     * @copyright 2015 Google, Inc.
     * @link https://github.com/google/material-design-lite
     */
    html{color:rgba(0,0,0,.87)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}.hidden{display:none}@media print{*,*:before,*:after{background:transparent;color:#000;box-shadow:none}tr{page-break-inside:avoid}p{orphans:3;widows:3}}.mdl-button{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(255,255,255,0)}html{width:100%;height:100%;-ms-touch-action:manipulation;touch-action:manipulation}body{width:100%;min-height:100%}html,body{font-family:"Helvetica","Arial",sans-serif;font-size:14px;font-weight:400;line-height:20px}h5,h6,p{padding:0}h5{font-size:20px;font-weight:500;line-height:1;letter-spacing:.02em}h5,h6{font-family:"Roboto","Helvetica","Arial",sans-serif;margin:24px 0 16px}h6{font-size:16px;letter-spacing:.04em}h6,p{font-weight:400;line-height:24px}p{font-size:14px;letter-spacing:0;margin:0 0 16px}.mdl-color-text--red{color:#f44336 }.mdl-color-text--blue{color:#2196f3 }.mdl-color-text--grey{color:#9e9e9e }.mdl-color--black{background-color:#000 }.mdl-color-text--white{color:#fff }.mdl-button{background:0 0;border:none;border-radius:2px;color:#000;position:relative;height:36px;margin:0;min-width:64px;padding:0 16px;display:inline-block;font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;overflow:hidden;will-change:box-shadow;transition:box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px;vertical-align:middle}.mdl-button::-moz-focus-inner{border:0}.mdl-button:hover{background-color:rgba(158,158,158,.2)}.mdl-button:focus:not(:active){background-color:rgba(0,0,0,.12)}.mdl-button:active{background-color:rgba(158,158,158,.4)}.mdl-button.mdl-button--colored:focus:not(:active){background-color:rgba(0,0,0,.12)}.mdl-button--raised{background:rgba(158,158,158,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}.mdl-button--raised:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);background-color:rgba(158,158,158,.4)}.mdl-button--raised:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);background-color:rgba(158,158,158,.4)}.mdl-button--raised.mdl-button--colored:focus:not(:active){background-color:rgb(63,81,181)}.mdl-button--fab:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);background-color:rgba(158,158,158,.4)}.mdl-button--fab.mdl-button--colored:focus:not(:active){background-color:rgb(255,64,129)}.mdl-button--accent.mdl-button--accent{color:rgb(255,64,129)}.mdl-button--accent.mdl-button--accent.mdl-button--raised{color:rgb(255,255,255);background-color:rgb(255,64,129)}.mdl-button[disabled][disabled]{color:rgba(0,0,0,.26);cursor:default;background-color:transparent}.mdl-button--raised[disabled][disabled]{background-color:rgba(0,0,0,.12);color:rgba(0,0,0,.26);box-shadow:none}@supports (-webkit-appearance:none){}@supports (pointer-events:auto){}.mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(63,81,181,.26)}.mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(63,81,181,.26)}.mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb{background:radial-gradient(circle closest-side,rgb(63,81,181)0%,rgb(63,81,181)37.5%,rgba(63,81,181,.26)37.5%,rgba(63,81,181,.26)100%);transform:scale(1)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb{background:radial-gradient(circle closest-side,rgba(0,0,0,.12)0%,rgba(0,0,0,.12)25%,rgba(0,0,0,.26)25%,rgba(0,0,0,.26)37.5%,rgba(0,0,0,.12)37.5%,rgba(0,0,0,.12)100%);transform:scale(1)}body{margin:0}

    /* custom css */
    #header {
      height: 24px;
      padding: 16px;
      margin: 0;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
      line-height: 24px;
    }
    .menu {
      float: left;
    }
    .search {
      float: right;
    }
    #container {
      max-width: 500px;
      padding: 32px 16px 64px 16px;
      margin: auto;
    }
    .title {
      text-align: center;
    }
    .rating {
      margin-bottom: 0;
      text-align: center;
    }
    #carousel {
      margin: 16px;
    }
    .dots {
      text-align: center;
    }
    .dots span {
      display: inline-block;
      background: #ccc;
      border-radius: 6px;
      width: 12px;
      height: 12px;
      margin: 4px;
    }
    .dots span.current {
      background: #555;
    }
    .options {
      margin: 16px 0;
    }
    .options h6 {
      text-transform: uppercase;
      margin: 0 0 4px 0;
    }
    .colors table {
      margin: 0 -8px;
    }
    .colors amp-img {
      border: solid 2px white;
      display: block;
      margin: auto;
    }
    .colors amp-img[selected] {
      outline: solid 2px red;
    }
    .sizes div {
      border: solid 1px black;
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-weight: 800;
      text-align: center;
    }
    .sizes div[selected] {
      background-color: gray;
      color: white;
      outline: none;
    }
    .unavailable::before {
      content: '';
      position: absolute;
      border-top: 1px solid black;
      margin-left: 1px;
      width: 57px;
      transform: rotate(45deg);
      transform-origin: 0% 0%;
    }
    .quantity select {
      font-size: 16px;
      border: solid 1px gray;
      padding: 8px;
    }
    table {
      width: 100%;
    }
    .hidden {
      display: none;
    }
    .center {
      text-align: center;
    }
    .mdl-button--accent.mdl-button--accent.mdl-button--raised {
      background-color: teal;
    }

    div {
      padding: 30px 50px;
    }
    .regionOptions p {
      display: none;
    }

    .regionOptions p.visible {
      display: block;
    }
    
    #regions option {
      margin-right: 10px;
    }
  </style>
</head>

<body>

  <amp-state id="selected">
    <script type="application/json">
      {
        "region": "US"
      }
    </script>
  </amp-state>

  <header id="header" class="mdl-color--black mdl-color-text--white">
    <span class="mdl-color-text--blue">Multi </span>Selector
  </header>


  <amp-selector id="regions" on="select:AMP.setState({selected: {region: event.targetOption}})" multiple>
    <div>
      <p><strong>Regions: </strong></p>

        <option option="US" value="US" class="mdl-button mdl-button--raised mdl-button--accent">US</option>
        <option option="Europe" value="Europe" class="mdl-button mdl-button--raised mdl-button--accent">Europe</option>
        <option option="Australia" value="Australia" class="mdl-button mdl-button--raised mdl-button--accent">Australia</option>
        <option option="Asia" value="Asia" class="mdl-button mdl-button--raised mdl-button--accent">Asia</option>

    </div>
  </amp-selector>


  <div class="regionOptions">
    <p [class]="selected.region == 'US' ? 'visible' : ''" class="visible">US</p>
    <p [class]="selected.region == 'US' ? 'visible' : ''" class="visible">US</p>
    <p [class]="selected.region == 'US' || selected.region == 'Europe' ? 'visible' : ''" class="visible">US & Europe</p>
    <p [class]="selected.region == 'Europe' ? 'visible' : ''" class="visible">Europe</p>
    <p [class]="selected.region == 'Europe' ? 'visible' : ''" class="visible">Europe</p>
    <p [class]="selected.region == 'US' || selected.region == 'Europe' || selected.region == 'Australia' ? 'visible' : ''" class="visible">Australia & US & Europe</p>
    <p [class]="selected.region == 'Australia' ? 'visible' : ''" class="visible">Australia</p>
    <p [class]="selected.region == 'Australia' ? 'visible' : ''"class="visible">Australia</p>
    <p [class]="selected.region == 'Asia' ? 'visible' : ''"class="visible">Asia</p>
  </div>


</body>
</html>

Answer 1

据我所知amp-selector只允许单人select。我认为在这种情况下尝试使用 checkbox

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>MultiSelect</title>
  <link rel="canonical" href="amps.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>


  <!-- AMP Components -->
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <script async custom-element="amp-bind"src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

  <style amp-custom>
    /*** uncss> filename: https://code.getmdl.io/1.3.0/material.indigo-pink.min.css ***/
    /**
     * material-design-lite - Material Design Components in CSS, JS and HTML
     * @version v1.3.0
     * @license Apache-2.0
     * @copyright 2015 Google, Inc.
     * @link https://github.com/google/material-design-lite
     */
    html{color:rgba(0,0,0,.87)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}.hidden{display:none}@media print{*,*:before,*:after{background:transparent;color:#000;box-shadow:none}tr{page-break-inside:avoid}p{orphans:3;widows:3}}.mdl-button{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(255,255,255,0)}html{width:100%;height:100%;-ms-touch-action:manipulation;touch-action:manipulation}body{width:100%;min-height:100%}html,body{font-family:"Helvetica","Arial",sans-serif;font-size:14px;font-weight:400;line-height:20px}h5,h6,p{padding:0}h5{font-size:20px;font-weight:500;line-height:1;letter-spacing:.02em}h5,h6{font-family:"Roboto","Helvetica","Arial",sans-serif;margin:24px 0 16px}h6{font-size:16px;letter-spacing:.04em}h6,p{font-weight:400;line-height:24px}p{font-size:14px;letter-spacing:0;margin:0 0 16px}.mdl-color-text--red{color:#f44336 }.mdl-color-text--blue{color:#2196f3 }.mdl-color-text--grey{color:#9e9e9e }.mdl-color--black{background-color:#000 }.mdl-color-text--white{color:#fff }.mdl-button{background:0 0;border:none;border-radius:2px;color:#000;position:relative;height:36px;margin:0;min-width:64px;padding:0 16px;display:inline-block;font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;overflow:hidden;will-change:box-shadow;transition:box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px;vertical-align:middle}.mdl-button::-moz-focus-inner{border:0}.mdl-button:hover{background-color:rgba(158,158,158,.2)}.mdl-button:focus:not(:active){background-color:rgba(0,0,0,.12)}.mdl-button:active{background-color:rgba(158,158,158,.4)}.mdl-button.mdl-button--colored:focus:not(:active){background-color:rgba(0,0,0,.12)}.mdl-button--raised{background:rgba(158,158,158,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}.mdl-button--raised:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);background-color:rgba(158,158,158,.4)}.mdl-button--raised:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);background-color:rgba(158,158,158,.4)}.mdl-button--raised.mdl-button--colored:focus:not(:active){background-color:rgb(63,81,181)}.mdl-button--fab:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);background-color:rgba(158,158,158,.4)}.mdl-button--fab.mdl-button--colored:focus:not(:active){background-color:rgb(255,64,129)}.mdl-button--accent.mdl-button--accent{color:rgb(255,64,129)}.mdl-button--accent.mdl-button--accent.mdl-button--raised{color:rgb(255,255,255);background-color:rgb(255,64,129)}.mdl-button[disabled][disabled]{color:rgba(0,0,0,.26);cursor:default;background-color:transparent}.mdl-button--raised[disabled][disabled]{background-color:rgba(0,0,0,.12);color:rgba(0,0,0,.26);box-shadow:none}@supports (-webkit-appearance:none){}@supports (pointer-events:auto){}.mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(63,81,181,.26)}.mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(63,81,181,.26)}.mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb{background:radial-gradient(circle closest-side,rgb(63,81,181)0%,rgb(63,81,181)37.5%,rgba(63,81,181,.26)37.5%,rgba(63,81,181,.26)100%);transform:scale(1)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb{background:radial-gradient(circle closest-side,rgba(0,0,0,.12)0%,rgba(0,0,0,.12)25%,rgba(0,0,0,.26)25%,rgba(0,0,0,.26)37.5%,rgba(0,0,0,.12)37.5%,rgba(0,0,0,.12)100%);transform:scale(1)}body{margin:0}

    /* custom css */
    #header {
      height: 24px;
      padding: 16px;
      margin: 0;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
      line-height: 24px;
    }
    .menu {
      float: left;
    }
    .search {
      float: right;
    }
    #container {
      max-width: 500px;
      padding: 32px 16px 64px 16px;
      margin: auto;
    }
    .title {
      text-align: center;
    }
    .rating {
      margin-bottom: 0;
      text-align: center;
    }
    #carousel {
      margin: 16px;
    }
    .dots {
      text-align: center;
    }
    .dots span {
      display: inline-block;
      background: #ccc;
      border-radius: 6px;
      width: 12px;
      height: 12px;
      margin: 4px;
    }
    .dots span.current {
      background: #555;
    }
    .options {
      margin: 16px 0;
    }
    .options h6 {
      text-transform: uppercase;
      margin: 0 0 4px 0;
    }
    .colors table {
      margin: 0 -8px;
    }
    .colors amp-img {
      border: solid 2px white;
      display: block;
      margin: auto;
    }
    .colors amp-img[selected] {
      outline: solid 2px red;
    }
    .sizes div {
      border: solid 1px black;
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-weight: 800;
      text-align: center;
    }
    .sizes div[selected] {
      background-color: gray;
      color: white;
      outline: none;
    }
    .unavailable::before {
      content: '';
      position: absolute;
      border-top: 1px solid black;
      margin-left: 1px;
      width: 57px;
      transform: rotate(45deg);
      transform-origin: 0% 0%;
    }
    .quantity select {
      font-size: 16px;
      border: solid 1px gray;
      padding: 8px;
    }
    table {
      width: 100%;
    }
    .hidden {
      display: none;
    }
    .center {
      text-align: center;
    }
    .mdl-button--accent.mdl-button--accent.mdl-button--raised {
      background-color: teal;
    }

    div {
      padding: 30px 50px;
    }
    .regionOptions p {
      display: none;
    }

    .regionOptions p.visible {
      display: block;
    }
    
    #regions option {
      margin-right: 10px;
    }
  </style>
</head>

<body>

  <amp-state id="selected">
    <script type="application/json">
      {
        "US": false,
        "Europe": false,
        "Australia": false,
        "Asia": false
        
      }
    </script>
  </amp-state>

  <header id="header" class="mdl-color--black mdl-color-text--white">
    <span class="mdl-color-text--blue">Multi </span>Selector
  </header>

<div>
  <input type="checkbox" value="US" on="change:AMP.setState({selected:{US: event.checked, Europe: selected.Europe, Australia: selected.Australia, Asia: selected.Asia }})" >US</input>
    <input type="checkbox" value="US" on="change:AMP.setState({selected:{US: selected.US, Europe: event.checked, Australia: selected.Australia, Asia: selected.Asia }})" >Europe</input>
      <input type="checkbox" value="US" on="change:AMP.setState({selected:{US: selected.US, Europe: selected.Europe, Australia: event.checked, Asia: selected.Asia }})" >Australia</input>
        <input type="checkbox" value="US" on="change:AMP.setState({selected:{US: selected.US, Europe: selected.Europe, Australia: selected.Australia, Asia: event.checked }})" >Asia</input>
</div>

 <div class="regionOptions">
    <p [class]="selected.US ? 'visible' : ''" class="visible">US</p>
    <p [class]="selected.US? 'visible' : ''" class="visible">US</p>
    <p [class]="selected.US || selected.Europe ? 'visible' : ''" class="visible">US & Europe</p>
    <p [class]="selected.Europe ? 'visible' : ''" class="visible">Europe</p>
    <p [class]="selected.Europe ? 'visible' : ''" class="visible">Europe</p>
    <p [class]="selected.US || selected.Europe || selected.Australia ? 'visible' : ''" class="visible">Australia & US & Europe</p>
    <p [class]="selected.Australia ? 'visible' : ''" class="visible">Australia</p>
    <p [class]="selected.Australia ? 'visible' : ''"class="visible">Australia</p>
    <p [class]="selected.Asia ? 'visible' : ''"class="visible">Asia</p>
  </div>


</body>
</html>

Answer 2

根据Hai Bui答案：你可以将复选框转换为按钮

Here is working URL

HTML 代码

    <div>
        <label class="btn">
        <input type="checkbox" value="US" on="change:AMP.setState({selected:{US: event.checked, Europe: selected.Europe, Australia: selected.Australia, Asia: selected.Asia }})"/>
        <span>US</span>
        </label>
        <label class="btn">
        <input type="checkbox" value="US" on="change:AMP.setState({selected:{US: selected.US, Europe: event.checked, Australia: selected.Australia, Asia: selected.Asia }})" />
        <span>Europe</span>
        </label>
        <label class="btn">
        <input type="checkbox" value="US" on="change:AMP.setState({selected:{US: selected.US, Europe: selected.Europe, Australia: event.checked, Asia: selected.Asia }})" />
        <span>Australia</span>
        </label>
        <label class="btn">
        <input type="checkbox" value="US" on="change:AMP.setState({selected:{US: selected.US, Europe: selected.Europe, Australia: selected.Australia, Asia: event.checked }})" >
        <span>Asia</span>
        </label>
    </div>

CSS 代码

.btn { position:relative; }
    .btn input { position:absolute; top:-20px; }
    .btn span { background-color: teal;  
    border:0px solid #000;
    border-radius: 2px;
    position: relative;
    height: 36px;
    margin: 0;
    min-width: 64px;
    padding: 0 16px;
    display: inline-block;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    overflow: hidden;
    will-change: box-shadow;
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
    outline: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 36px;
    vertical-align: middle;
    color:#fff;
    }
    .btn input:checked + span { border:1px solid #000; box-shadow:0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); }

如何使用 amp-selector 绑定多个值？

How to bind multiple values with amp-selector?

amp-html

amp-bind