입력란에 마우스를 올리면

Question

입력 문제가 발생했습니다. 내 버튼을 음수 여백 - 왼쪽 (입력 사이의 공백 삭제)으로 배치합니다. 전체적으로 보일 필요가 있기 때문에 버튼에만 테두리가 있어야합니다. 음수 여백을 사용하지 않고 텍스트 필드의 오른쪽 테두리를 제거하면 입력 사이에 약간의 빈 공간이 생깁니다. 문제는 텍스트 상자를 클릭 할 때 오른쪽에 호버가 보이지 않는다는 것입니다. 어떻게 수정 될 수 있습니까? 결국, 난 단지 올바른 가져가

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

으로, (버튼 및 텍스트 필드 사이에 공백없이, 모든 측면에있는 버튼 라운드 국경) 사진에서와 동일한를 얻어야한다

Answer 1

원하는 결과입니까?

.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을 제거 input과 button 주위에 새로운 div을 작성 border 및 border-radius와 일부 스타일을했다.

Answer 2

이 질문에 대한 제 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 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; 
}