포커스가있는 입력 필드 확장

검색 상자를 확장하고 싶습니다 왼쪽에 포커스가 있습니다. 다음 코드는 확장되지만 오른쪽으로 확장됩니다. 왼쪽으로 확장 할 여지가 있습니까?포커스가있는 입력 필드 확장

HTML :

<input type="text" placeholder="search">

CSS :

input[type="text"] { 
    background: #444; 
    border: 0 none; 
    color: #d7d7d7; 
    width:50px; 
    padding: 6px 15px 6px 35px; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    margin:3px 12px; 
} 

input[type="text"]:focus { 
    background:#ccc; 
    color: #6a6f75; 
    width: 120px;  
    margin:3px 12px; 
    outline: none; 
} 

input[type="text"] { 
    -webkit-transition: all 0.7s ease 0s; 
    -moz-transition: all 0.7s ease 0s; 
    -o-transition: all 0.7s ease 0s; 
    transition: all 0.7s ease 0s; 
}

데모 : http://jsfiddle.net/7ppaS/

출처

2013-11-04 user2738640

어떻게이 margin-left 변화와 함께, 왼쪽으로 확장 할 padding-left 사용에 대한 그래서 입력 상자가 같은 장소에 남아 있음 :

input[type="text"] { 
    background: #444; 
    border: 0 none; 
    color: #d7d7d7; 
    width:50px; 
    padding: 6px 15px 6px 35px; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    margin:3px 80px; 
} 

input[type="text"]:focus { 
    background:#ccc; 
    color: #6a6f75; 
    padding-left:80px; 
    margin-left:35px; 
    outline: none; 
}

DEMO : http://jsfiddle.net/7ppaS/4/

출처

2013-11-04 11:58:42 tomsullivan1989

사용 방향 : 코드에서 RTL :

input[type="text"] { 
    background: #444; 
    border: 0 none; 
    color: #d7d7d7; 
    width:50px; 
    padding: 6px 15px 6px 35px; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    margin:3px 12px; 
    direction:rtl 
}

http://jsfiddle.net/7ppaS/8/

출처

2013-11-04 11:55:52 Radian

니스! 그 하나가 나를 위해 새 것이 었어! –

오른쪽에서 왼쪽으로 사용되는 언어 페르시아어 또는 아랍어 같은 언어이지만 어쨌든 작동합니다. – Radian

padding-left:70px;에 초점을 추가 할 수 있습니다. 그러면 왼쪽으로 확장됩니다.

출처

2013-11-04 12:00:52

포커스가있는 입력 필드 확장

답변

관련 문제