色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

html css中雙輸入布局上的按鈕

CSS
錢琪琛1年前7瀏覽0評論

我怎樣才能創建一個類似這樣的布局，使按鈕在兩個輸入上？

Wanted layout

我只有這個代碼，不知道如何使按鈕附加到兩個輸入。

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <label>First</label>
    <input type="text">
    <br>
    <input type="image" height="30" src="https://www.pngitem.com/pimgs/m/627-6274702_exchange-arrows-icons-png-clipart-png-download-exchange.png" />
    <br>
    <label>Second</label>
    <input type="text">
  </body>
</html>

作為切換按鈕，用于在兩個位置之間切換數值。您可以使用輸入類型單選按鈕，并將按鈕用作切換值的開關。這里有一個例子

const switchBtn = document.querySelector('.switch');
    const liverpool_to_belfast = document.querySelector('[value="liverpool_to_belfast"]');
    const belfast_to_liverpool = document.querySelector('[value="belfast_to_liverpool"]');

    switchBtn.addEventListener("click", () => {
      if (liverpool_to_belfast.checked) {
        liverpool_to_belfast.checked = false;
        belfast_to_liverpool.checked = true;
      } else {
        liverpool_to_belfast.checked = true;
        belfast_to_liverpool.checked = false;
      }

      // Test Value
      document.querySelectorAll('[name="location"]').forEach(btn => {
        if (btn.checked) {
          console.log(btn.value);
        }
      });
    });

.parent {
      border: 1px solid gray;
      border-radius: 10px;
      width: max-content;
      height: max-content;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .child {
      padding: 1rem;
    }

    .child:first-child {
      border-bottom: 1px solid gray;
    }
    input[name="location"]{
       display: none;
    }

    .switch_parent {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .switch {
      border-radius: 50%;
      padding: 0.5rem;
      background-color: rgb(196, 196, 196);
      width: max-content;
      position: absolute;
      top: 50%;
      right: 5%;
      transform: translateY(-50%);
      cursor: pointer;
      user-select: none;
    }

<div class="parent">
    <div class="child">
      <input type="radio" name="location" id="liverpool_to_belfast" value="liverpool_to_belfast" checked>
      <label for="liverpool_to_belfast">Liverpool &rarr; Belfast</label>
    </div>
    <div class="child">
      <input type="radio" name="location" id="belfast_to_liverpool" value="belfast_to_liverpool">
      <label for="belfast_to_liverpool">Belfast &rarr; Liverpool</label>
    </div>
    <div class="switch_parent">
      <div class="switch">
        <span>&uarr;</span>
        <span>&darr;</span>
      </div>
    </div>
  </div>

有許多不同的方法可以做到這一點，但從你已經得到的開始，你可以獲得正確的位置，無論是負利潤率:

<html>
<head>
<title>Page Title</title>
</head>
<body>

<input type="text">
<input type="image" height="30" src="https://www.pngitem.com/pimgs/m/627-6274702_exchange-arrows-icons-png-clipart-png-download-exchange.png" style="z-index:1;position:relative;margin-bottom:-20px;margin-left:-50px;"/>
<br>
<input type="text" />

</body>
</html>

<!DOCTYPE html>
<html>
<body>
<style>
.input-container {
  position: relative;
  width: 400px; 
}

.input-container div{
    border: 2px solid grey;
  display: flex;
  justify-content: space-between;
}

.input-container input{
  width: 80%;
  border: none;
  outline: none;
}


#button{
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translate(0, -50%);
  border: none;
  background: transparent;
  z-index: 1;
}

</style>


<div class="input-container">
<div>
  <label>First </label>
  <input type="text" placeholder="input1">
</div>
<div>
  <label>Second</label>
  <input type="text" placeholder="input2">
</div>
  <button id="button"><img height="20" src="https://www.pngitem.com/pimgs/m/627-6274702_exchange-arrows-icons-png-clipart-png-download-exchange.png" />
  </button>
</div>


</body>
</html>