如何保持焦点按钮并将重点发送到表单？

Question

1. 我想同时选择两个按钮（颜色和尺寸），我希望它像这样关注＆gt;＆gt; enter image description here

2. 我想在表单上发送数据表单焦点按钮。

	function show(elementId) { 
		 document.getElementById("id1").style.display="none";
		 document.getElementById("id2").style.display="none";
		 document.getElementById("id3").style.display="none";
		 document.getElementById(elementId).style.display="block";
	}

.btn:focus{
    border-radius: 20px;
    color:#000;
}
.btn2:focus{
    border-radius: 10px;
    color:#D97476;
}

<form name="selectItem" method="POST" action="keepdata.php">
  
  <div class="select-color">

    <p>Select color</p>
    <button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button>
    <button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button>
    <button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button>


  </div>

  <div class="select-option-s7">
    <p>Select Size</p>
    <button type="button" class="btn2 btn-color black" title="black">S</button>
    <button type="button" class="btn2 btn-color silver" title="silver">M</button>
    <button type="button" class="btn2 btn-color silver" title="silver">L</button>
  </div>
  
  
  <button type="submit">submit</button>

</form>

谢谢

Answer 1

为什么不使用input type =“radio”？

使用另一个带有样式的类，并使用jquery在单击按钮上添加类。

$('.select-color button').on('click', function(){
    $('.select-color button.selected').removeClass('selected');
    $(this).addClass('selected');
});

$('.select-option-s7 button').on('click', function(){
    $('.select-option-s7 button.selected').removeClass('selected');
    $(this).addClass('selected');
});

.selected{
  border-radius: 10px;
  color:#D97476;
}

.btn:focus{
  outline: none;
}

.btn2:focus{
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="selectItem" method="POST" action="keepdata.php">
  
  <div class="select-color">

    <p>Select color</p>
    <button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button>
    <button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button>
    <button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button>


  </div>

  <div class="select-option-s7">
    <p>Select Size</p>
    <button type="button" class="btn2 btn-color black" title="black">S</button>
    <button type="button" class="btn2 btn-color silver" title="silver">M</button>
    <button type="button" class="btn2 btn-color silver" title="silver">L</button>
  </div>
  
  
  <button type="submit">submit</button>

</form>