검색 상자 속성을 변경할 수 없습니다.

Question

CSS 코딩을 조정하고 아무런 노력도하지 않았습니다. 상황이 내가 원하는 : 5px

의 국경 반경

• 검색 창

HTML 아웃이

모두 검색 상자와 검색 아이콘이 고르게 DIV 주위에 배치 dispalced 점점 검색 아이콘을 확대 CODE :

 <div class="search" 
     <div class="searchbox"> 
      <form action="/search" method="get" class="search_form"> 
      <input type="text" value="Search Blog..." class="search_text" name="q"> 
      <input type="image" src="http://s25.postimg.org/d3fu892zz/search_button_without_text_md.png" height="20" width="20"class="button"> 
      </form> 
     </div> 
    </div> 

CSS 코드 :

.search{position:fixed; 
    height:25px; 
    width:194px; 
    top:189px; 
    left:14px; 
    border:2px solid black; 
    background-color:black; 
    border-radius:10px; 
    padding-left:2px; 
    padding-bottom:4px; 
    opacity:.8;} 

Answer 1

Notice : class = "search"div는 닫히지 않았습니다 !! http://jsfiddle.net/vg8Mn/

-

.search{position:absolute; 
height:28px; 
width:190px; 
top:140px; 
left:100px; 
border:2px solid black; 
background-color:black; 
border-radius:10px; 
padding-left:2px; 
padding-bottom:4px; 
opacity:.8; 
} 

form#input{ 
    display:inline-block; 
} 

.searchbox{ 

} 

.search_text{ 
    margin-top:4px; 
    margin-left:5px; 
    border-radius:5px; 
    text-align:center; 
} 

.button{ 
    margin-top:5px; 
    margin-left:2px; 
    position:absolute; 
    height:20px; 
    width:20px; 
} 
.button:hover{ 
    -webkit-transform:scale(1.3); 
      -moz-transform:scale(1.3); 
      -o-transform:scale(1.3); 
      opacity: 3; 

} 

작업 JSfiddle 데모 : 여기

작동하고 당신의 모든 세 가지 조건

<div class="search"> 
<div class="searchbox"> 
    <form action="/search" method="get" class="search_form"> 
     <input type="text" value="Search Blog..." class="search_text" name="q"> 
<input type="image" src="http://i42.tinypic.com/fayl43.png" class="button"> 
    </form> 
</div> 

CSS 코드를 fullfill에해야하는 코드입니다

희망이 도움이 :)