悬停在输入字段中

-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

悬停在输入字段中

回答

相关问题