懸停在輸入字段中

-2

我有輸入公司和一個問題。我定位我的按鈕與負邊緣左側（刪除輸入之間的空間），因爲我需要它看起來像一個整體，只有按鈕應該有邊框輪。如果我不使用負邊距並刪除文本字段的右邊框，則會在輸入之間留出一點空白區域。問題是，當你點擊文本框時，我沒有看到右側懸停，這怎麼解決？最後，我應該得到相同的照片（上各方的按鈕圓形邊框，沒有按鈕和文本字段之間的空間），只有擁有正確懸停懸停在輸入字段中

#text-area { 
 
height: 11px; 
 
} 
 

 
#button-area { 
 
margin-left:-10px; 
 

 
}

<input type="text" placeholder="enter text here" id="text-area"> 
 
<input type="submit" placeholder="enter text here" id="button-area" value="Find">

來源

2017-12-27 Alex Chirkin

「問題是，當你點擊文本框，我沒有看到在右側懸停」 - 你能改寫這句話？目前尚不清楚你的問題是什麼... – sinisake

提供一個工作代碼片段，我們可以看到你的意思。 – panther

我想你徘徊和foucing困惑..試着問問題清楚 –

這是您想要的結果嗎？

.formthing { 
 
    border: 1px solid gray; 
 
    display: inline; 
 
    border-radius: 3px; 
 
    padding: 1px; 
 
} 
 

 
#text-area { 
 
    border: none; 
 
} 
 

 
#button-area { 
 
    margin-left: -4px; 
 
    margin-right: -2px; 
 
    background-color: #CDFF65; 
 
    height: 23px; 
 
    border: 1px solid gray; 
 
    border-radius: 3px; 
 
} 
 

 
.formthing:hover, 
 
.formthing:hover > #button-area { 
 
    border: 1px solid #5794BF; 
 
}

<div class="formthing"> 
 
    <input type="text" placeholder="enter text here" id="text-area"> 
 
    <input type="submit" placeholder="enter text here" id="button-area" value="Find"> 
 
</div>

我刪除了input的border，創造了一個新的div和input的button四周，做了一些造型與border和border-radius。

來源

2017-12-27 11:53:54

根據我的理解你的問題，我的這個問題的CSS代碼看起來有點像這樣。

  #text-area { 
 
       /* height: 11px; 
 
       */ 
 
       border: 2px solid rgba(92, 91, 91, 0.589); 
 
       border-right: none; 
 
       margin-right: none; 
 
       padding-right: none; 
 
      } 
 
      
 
      #button-area { 
 
       margin-left: -4.8%; 
 
       padding-top: 0.0625rem; 
 
       padding-bottom: 0.0625rem; 
 
       background-color: #8cc425; 
 
       border: 0.125rem solid rgba(92, 91, 91, 0.589); 
 
       border-radius: 0.1875rem; 
 
      } 
 
      #button-area:hover{ 
 
       cursor: pointer; 
 
      }

 <input type="text" placeholder="enter text here" id="text-area"> 
 
     <input type="submit" placeholder="enter text here" id="button-area" value="Find" >

您可以自由使用此代碼試驗。如果您對此答案中的評論有任何疑問，

來源

2017-12-27 12:12:23

https://jsfiddle.net/chaitanya207/svh46aL1/

.find-box{ 
    width:450px; 
    position:relative; 
} 
.find-box input[type="text"]{ 
    width:450px; 
    border:2px solid #9f9f9f; 
    height:70px; 
    border-radius: 5px; 
    font-family:arial; 
    text-transform:capitalize; 
    text-indent:10px; 
    outline:none; 
} 
.find-box input[type="submit"]{ 
    width:100px; 
    background:#cdff65; 
    border:none; 
    font-family:arial; 
    font-size:18px; 
    height:72px; 
    border-radius: 0px 5px 5px 0px; 
    position:absolute; 
    top:2px; 
    right:-2px; 
    cursor:pointer; 
}

來源

2017-12-27 12:20:13

懸停在輸入字段中

回答

相關問題