悬停在输入字段中

  • Z时代
  • 2024-01-10
  • 分类：问答

我有输入公司和一个问题。我定位我的按钮与负边缘左侧（删除输入之间的空间），因为我需要它看起来像一个整体，只有按钮应该有边框轮。如果我不使用负边距并删除文本字段的右边框，则会在输入之间留出一点空白区域。问题是，当你点击文本框时，我没有看到右侧悬停，这怎么解决？最后，我应该得到相同的照片（上各方的按钮圆形边框，没有按钮和文本字段之间的空间），只有拥有正确悬停悬停在输入字段中

#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">

回答：

这是您想要的结果吗？

.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。

回答：

根据我的理解你的问题，我的这个问题的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" >

您可以自由使用此代码试验。 如果您对此答案中的评论有任何疑问，

回答：

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; 
}

以上是 悬停在输入字段中 的全部内容， 来源链接： utcz.com/qa/264538.html

回到顶部