Какими средствами можно убрать из виду select по умолчанию
 

Здрасте все знающие люди.
Подскажите плиз, какими средствами можно скрыть select, не сам select а то что по умолчанию.
Как сделать все как в контакте я знаю но как скрыть select то что указано стрелкой я недоуминеваю.

Кроме как предложения срыть за слоем input мне в голову не лезет, но может есть какие либо иные средства, стандартные или не стандартные, которыми можно повлеять на селест

<select  id="time_rubric" name="time_rubric">
					<option  value="1">Выберите героя</option>
					<option value="2">Чебурашка</option>
					<option value="3">Крокодил Гена</option>
					<option value="4">Шапокляк</option>
					<option value="5">Крыса Лариса</option>
			   </select>

Вы наверное имели ввиду задать параметр по умолчанию:

<form action="index.php" method="post">
   <select name="some">
   	<option selected="selected" value="1"> -- Выберите героя -- </option>
   	<option value="2">Чебурашка</option>
   	<option value="3">Крокодил Гена</option>
   	<option value="4">Шапокляк</option>
   </select>
   <input type="submit" value="Отправить">
</form>

)) Нет ))))

Посмотрите как VK сделано

Очень рекомендую почитать про тег option

Да блин, не то ))) Я знаю что такое option
)))

Поясню,коротко
Есть input, который реагирует на каждое действие пользователя, как в google или в yandex, под которым раскрывается некий список select.
То есть у гугла и у яши нет select списка, у них всё сделано иначе, но у меня будет select.
Если пользователь выбрал что либо в select то соотвественно, это все вставляется автоматом в input, но если он не выбирает а вводит руками в input то [onSelect] реагирует на это и отправляет запрос ajax который формирует select под input и в дизе как вы говорите
Это лишнее, то есть точнее не лишнее, а оно должно именно идти вместо input

То есть идея заключается в том, что у http://vkontakte.ru/editProfile.php?act=education при исправлени Дата выпуска


.

Все очень просто, на примере input, дальше сами доработаете как нужно:

<div id="list">
	<form action="">
	<select>
		<option selected="selected" value="0"> - - - выберите - - - </option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="2">2</option>
	</select>
	<input type="text" value="" id="input" />
	</form>
</div>

window.onload = function() {
    var select = document.getElementById("list").getElementsByTagName('select');
    for(i=0; i<select.length; i++) {
        select[i].onchange = function() {
            document.getElementById("input").value = this.options[this.selectedIndex].value;
        }
        select[i].onfocus = function() {
        this.form.reset();
        }
    }
};

Не то )))
Опять недопонимание )
Мне надо скрыть select, то есть ту часть, при клике на которую он как раз и раскрыватся,а раскрываться он у меня должен как раз при клике на input.

То есть при вводе чего либо в input или же при событии onFocus на input он у меня должен появляться.

То же самое можно сделать если под input вставить textarea с неким списком li который как раз и будет появляться при onFocus на input

Ultimatum,
вы не сможете сделать так как хотите, делайте как скажут. Селект раскрывается по клику левой кнопки мыши(не эмуляции, а именно клику) - undestand? другими словами вы не сможете заставить его раскрыться. Поэтому не морочте всем голову и сделайте div под селектом с оverflow:hidden, а затем добавьте ему функционал. И будет вам счастье с почти селектом ;)

Gozar,
Я уже пришел к этому выводу )))
спасибо всем за помощь

Зачем что-то мудить...
Вы хотите другой вид селекта?
CSS не пробывали для начала?

Ну мне кажется нельзя повлиять на select (display:none) при клике на которую он как раз и раскрываться, только если напрятать его средствами css.
Я буду делать дивами в которые вложу список LI который уберу в display:none и он будет подгружаться при событии onFocus и соответственно скрываться

float,
объясните нам всем неразумным, как раскрыть select по клику на input, средствами css?

может я чего недопонял и нужно было это:

<input type="text" id="inpt" onclick="document.getElementById('ku').style.visibility='visible'"><br>
<select multiple size="3" id="ku" style="visibility:hidden;" onclick="document.getElementById('inpt').value=this.options[this.selectedIndex].value;this.style.visibility='hidden'">
<option>одын</option>
<option selected>двысти дваццат восэм</option>
<option>тры</option>
<option>четыреста</option>
<option>чатыреста триццать</option>
</select>

value в Internet Explorer без DOCTYPE не сработает -- лучше this.options[this.selectedIndex].text если value в option явно не указано

Сделаю, выложи своё. Правда с дизом, потому что делаю под свой проект. Думаю к субботе закончу. Почему так долго, потому что буду прикручивать ajax+json+php+mysql+....генерация самописного select на основе вводов input.

Ну а общими усилиями поможете оптимизировать код )

Никак. Я ж код не смотрел, так, на картинки глянул:D

Хм... а вы вообще уверены, что там именно селект?
Походу просто муляж.
Они там ничего и не скрывают... вы огнежукам вообще открывали?!

Озадачил блин.
Ну пусть не только css...

вот набросал... перед сном))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title></title>
	<style>
		input {border: 1px solid #000; width: 300px;}
		select {width: 300px; display: none;}
	</style>
	</head>
<body>

<form>
<input id="put" type="text" onclick="show()" onblur="show()" /><br />
<select size="5" id="inp">
	<option>1</option>
	<option>2</option>
	<option>3</option>
</select>
</form>

<script>
	function show() {
		document.getElementById('inp').style.display = (document.getElementById('inp').style.display == 'block')?'none':'block';
		try {document.getElementById('put').value = document.getElementById('inp').options[document.getElementById('inp').selectedIndex].text;} catch(e){}
	}
</script>

</body>
</html>

Снова поднимаю тему ))
Есть некий input, задача которого принять от пользователя данные.
Если данные есть уже в списке, который автоматически раскрывается,
то пользователь просто выберет нужную ему категорию и продолжит создание темы.
А если название новое и пользователь не нашел нужной ему категории в списке, то список не
закрывается при клике на другой участок браузера ,
как происходит скажем при клике(onBlur).Как мне сделать, чтобы список закрывался при onBlur
или другом событии, не могу понять как довести до идеала или что-то похожее было на правду.

Так же прошу помощи в исправлениях моих ошибках в коде и оптимизации JS

http://lovelife.su/newtime
В последствии всё это будет подгужаться с помощь ajax в виде json

// var slovos = new Array();
var s_json = new Array();
var oldValue;
// var reps		 = new Array();
// var list		 = new Array();
// var greats		 = new Array();
var lis_input_catalog = 'Введите название';
var lis_new_catalog = 'Новая категория';
var lis_start = '<div style="margin-top:20px;position:absolute;background-color:#fff;border-bottom:1px solid #cde;border-left:1px solid #cde;border-right:1px solid #cde;">' +
				'<div class="result_list result_list_scrollable">' +
				'<ul class="list" style="padding: 0px 0px 3px 0px;margin:0px 0px 0px 0px;">' +
				'<li onmouseover="this.style.backgroundColor=\'#91abc4\';this.style.color=\'#fff\';"'+ 
				'onmouseout="this.style.backgroundColor=\'#e9e9e9\';  	this.style.color=\'#000\';"'+ 
				'onclick="d_list()" id="noin">';
var lis_end	=  '</lu></div></div>';

s_json['id'] = [ 1, 3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18];
s_json['j'] = ['Крокодил гена','пока','земля','сон','провод',
'магазин','авто','ав','басы','участок',
'перевод','старт','ГИБДД','Пятница','Путин',
'Москва','Санкт-Питербург','клаксон'
];
function activate_select(){
setInterval(function (){

			if (document.getElementById('stail').value != oldValue)
				{ 
					oldValue =	document.getElementById('stail').value;
					if(oldValue.length	!= ''){
					// input fool
					// функция формирования и проверки массива
					 document.getElementById('selectwrite').innerHTML = ''; 
					 space = search_json(oldValue)
					 
						 if(space != ''){
						 document.getElementById('selectwrite').innerHTML = lis_start + lis_new_catalog  +'</li>'+ space +  lis_end;
						 }else{
						 document.getElementById('selectwrite').innerHTML ='';
						 }
					 
					 
					}else{
					
					 document.getElementById('selectwrite').innerHTML = ''; 
					 space = search_json(oldValue)
					 document.getElementById('selectwrite').innerHTML = lis_start + lis_input_catalog  +'</li>'+ space +  lis_end; 
					

					}
				}
			}, 
		10 );
}
// функция для просмотра длины слова
function  search_json(slovo)
	 
	
	{
	var lis	=	'';
		for(var f = 0;	f <= s_json['j'].length; f++)
		{
				// lis.appendChild(lis);
			
			//	document.getElementById('r2').innerHTML = s_json['j'][f];		
				if( s_json['j'][f] == undefined )
				{
						
				}else{
				
					if( slovo.length <= s_json['j'][f].length )
					{ 
					if (s_json['j'][f].search(new RegExp( slovo , "gi")) != -1? true : false )
						{ // регулярное выражение по поиску совпадений
							// регулярное выражение по замене
							reps =   s_json['j'][f].replace(new RegExp( slovo , "g"), '<em>' + slovo + '</em>') ;
							//	list['id'] =   s_json['id'][f];
							
							
							lis	= lis + '<li onclick="onclick_select_list(\'' + s_json['id'][f] + '\',\'' + s_json['j'][f]	+ '\')" ' +
							'onmouseover="this.style.backgroundColor=\'#6083a5\';this.style.color=\'#fff\';'+
							'this.style.borderTop = \'solid #f82525 1px\';this.style.borderBottom = \'solid #f82525 1px\';" '+
							'onmouseout="this.style.backgroundColor=\'#fff\';  	this.style.color=\'#000\';'+
							'this.style.borderTop = \'solid #ffffff 1px\';this.style.borderBottom = \'solid #ffffff 1px\';" value="' + s_json['id'][f] +'">' + reps	+ '</li>';
						}
					}
				}
		}
			
	return lis ;
			
	}
	//	res(listing);
		//	проверка
	function	onclick_select_list(id_value, var_value){
	
	 document.getElementById('stail').value = var_value;
	 document.getElementById('catalog_id').value = id_value;
	 document.getElementById('selectwrite').innerHTML = ''; 
	}
	
	function	onactivate_selec(){
	
	 document.getElementById('selectwrite').innerHTML = ''; 
	}
	
	
	
	
	
	function	delete_select_list(){
	
	var selectw	=	document.getElementById('selectwrite');
	if (selectw	!=	''){
	
	 // document.getElementById('selectwrite').innerHTML = ''; 
	 }else{
	 activate_select();
	 }
	}	
	
	
		
	
	function	d_list(){
	 document.getElementById('selectwrite').innerHTML = ''; 
	}

<div id="selectinput">
	<div style="cursor: pointer; width: 163px;">
		<img style="cursor: pointer; width: 9px; height: 20px; border: 1px none; padding: 0px; float: left;" src="/img/left_catalog_theme.gif" alt="|">
		<div style="display:inline;float:left;background-image: url('/img/catalog_input.gif');width: 154px; height: 20px;border: 0px; ">

		<input  onBlur="delete_select_list()"  value="" id="stail" onFocus="activate_select()" style="padding: 0px 0px 1px 0px;background-color:#fcfcfc;margin:2px 0px 2px 0px;height: 15px;width: 129px;float: left;border: 0px none;" name="catalog" type="text" size="10">
		<input  id="catalog_id" value="" style="display:none;" name="catalog_id" type="text">
		
		<div onclick="activate_select()" style="background-repeat: no-repeat;display:inline;float:left;background-image:url('/img/catalog_open_select.gif');width: 25px; height: 20px; ">
			</div>
		</div>
	</div>
</div>

<div id="selectwrite"></div>

Прошу не пинать слишком нагами, так как изучаю JS более недели и то по мере того что необходимо