управление направлением входного окна продолжается в html

-1

Я читаю код HTML и CSS http://preview.python.org/, я не понимаю: Пожалуйста, посмотрите на поле поиска. Как добиться поиска значков? Я не думаю, что это файл jpg или png, , как это сделать? И когда вы фокусируете поле ввода, оно распространяется справа налево, как его достичь? Я тестирую поле ввода, это не так. Спасибо.управление направлением входного окна продолжается в html

источник

2013-07-04 user2549846

Значок только контент - использовать инспектор DOM, как FireBug или что-то и осмотрите этот элемент, тогда вы его увидите. И расширение поля ввода может быть выполнено простым переходом CSS, когда поле имеет ': focus'. – CBroe

Вы можете выполнить это, используя свойство CSS transition. Посмотрите на пример кода ниже:

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
    <script> 
    function revertBackWidth(){ 
     console.log("calling"); 
     document.getElementById("s").style.width="100px"; 

    } 
    </script> 
</head> 
<body onmousedown=""> 
    <input type="text" class="s" id="s" onchange="revertBackWidth()"> 
</body> 
</html>

CSS:

input { 
width: 100%; 
padding: .65em; 
margin-bottom: .875em; 
border: 1px solid #caccce; 
-webkit-border-radius: 6px; 
-moz-border-radius: 6px; 
-ms-border-radius: 6px; 
-o-border-radius: 6px; 
border-radius: 6px; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
    width:100px; 
    float:right; 
    position:relative; 

} 

.s{ 
    -webkit-transition: width .3s ease-in-out; /* Chrome 1-25, Safari 3.2+ */ 
    -moz-transition:width .3s ease-in-out; /* Firefox 4-15 */ 
    -o-transition: width .3s ease-in-out; /* Opera 10.50–12.00 */ 
    transition:width .3s ease-in-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ 

} 
#s:focus 
{ 
width:200px; 
}

Live Demo For Reference

источник

2013-07-04 10:46:36

Большое спасибо за вашу помощь. – user2549846

управление направлением входного окна продолжается в html

ответ

Смежные вопросы