Question

我有输入公司和一个问题。我将我的按钮放在负边距左边（删除输入之间的空格），因为我需要它看起来像一个整体，只有按钮应该有边框圆。如果我不使用负边距并删除文本字段的右边框，我会在输入之间获得一些空白空间。问题是当你点击文本框时，我看不到右边的悬停，这怎么能修复？最后，我应该像在照片中一样（所有方面的按钮上的圆形边框，按钮和文本字段之间没有空格），只有正确的悬停

＆＃13;

#text-area {
height: 11px;
}

#button-area {
margin-left:-10px;

}

＆＃13;

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

＆＃13;

Answer 1

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

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

Answer 2

这是您想要的结果吗？

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

我删除了border的{{1}}，围绕input和div创建了一个新的input，并使用{{1}做了一些样式}和button。

Answer 3

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

Answer 4

:focus 选择器用于选择具有焦点的元素。

即：- :focus 选择器允许用于接受键盘事件或其他用户输入的元素。

它有效，当我们输入输入内容时

<!DOCTYPE html>
<html>
<head>
<style>
  input:focus {
    background-color: yellow;
  }
</style>
</head>
<body>

  <p>Click inside the text fields to see a yellow background:</p>

  <form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
  </form>

</body>
</html>

将鼠标悬停在输入字段中

4 个答案: