В PHP определенны три константы

• STDIN – Уже открытый поток ввода (stdin)
• STDOUT – Уже открытый поток вывода (stdout)
• STDERR – Уже открытый поток ошибок (stderr)

То есть чтобы построчно считать и вывести поток ввода достаточно написать:

while (FALSE !== ($line = fgets(STDIN)))
{
	echo $line;
}

Зачем открывать локальные файлы через JavaScript?

Загрузка файлов через обычные HTML формы очень неудобна. Люди часто используют его допустим при передаче нескольких мегобайт фотографий со своей камеры на сервер. Если предположить что они знают местоположение фотографий, то загрузка может занять несколько минут, но это только если все будет хорошо и форматы и разамеры будут подходящими, а что если нет? До сих пор разработчикам приходилось пологаться на Flash или другие плагины для обеспечение удобства. Предварительная обработка с помощю Javascript‘a имеет ряд преимуществ:

• Локальная обработка файлов происходит на много быстрей.
• Файлы могут быть проанализированны, чтобы убедиться, что они в правильном формате и ниже, орпеделенного размера.
• Такие файлы как картинки могут быть просмотренны перед загрузкой.
• Можно обрезать или изменить размер изображения перед загрузкой с помощю canvas.

Объект FileReader.

FileReader является частью W3C File API и предостовляет четыре метода для асинхронной загрузки данных из ссылки к объекту File.

• .readAsText(File f, [кодировка]) – считывает файл как строку. По умолчанию в кодировке UTF-8, но можно передать и другой формат.
• .readAsDataURL(File f) – как закодированный URL.
• .readAsBinaryString(File f) – как двоичный код.
• .readAsArrayBuffer(File f) – как объект ArrayBuffer.

В следующем коде будем использовать превые два метода для загрузки и отображения текста и картинок.

Асинхронное открытие файлов с помощю Javascipt.

Вот наша исхлдная функция ParseFile() в который предаются выбранные или перетащенные на элемент #filedrag файлы.

function ParseFile(file) {

	Output(
		"<p>Информация о файле: <strong>" + file.name +
		"</strong> тип: <strong>" + file.type +
		"</strong> размер: <strong>" + file.size +
		"</strong> байт</p>"
	);

}

После обновления статуса, мы проверяем является ли переданный файл текстовым (text/plain, text/html, text/css, и т.д.), загружаем его используя метод FileReader.readAsText() и выводим результат:

// выводим текст
if (file.type.indexOf("text") == 0) {
	var reader = new FileReader();
	reader.onload = function(e) {
		Output(
			"<p><strong>" + file.name + ":</strong></p><pre>" +
			e.target.result.replace(/</g, "<").replace(/>/g, ">") +
			"</pre>"
		);
	}
	reader.readAsText(file);
}

Точно также мы можем проверить, если у нас файл является картинкой (image/jpeg, image/gif, image/png и т.д.) загрузить его как data URL используя метод FileReader.readAsDataURL() и передать это все дело как src атрибут для элемента img:

// выводим картинку
if (file.type.indexOf("image") == 0) {
	var reader = new FileReader();
	reader.onload = function(e) {
		Output(
			"<p><strong>" + file.name + ":</strong><br />" +
			'<img src="' + e.target.result + '" /></p>'
		);
	}
	reader.readAsDataURL(file);
}

Продажа фирм

1. сделать возможным перетаксивание файлов на элемент web страницы.
2. анализировать перенесенные файлы с помошью JavaScript.
3. загружать и парсить файлы со стороны клиента.
4. асинхронно загружать файлы на сервер используя XMLHttpRequest2
5. показать прогресс бар пока идет загрузка файлов

В этой статье расмотрим первые три пункта. В итоге получим примерно такую форму:

Поддержка браузеров

Прежде чем начать, нужно отметить что поддержка перетаскивания файлов браузерами будет неравномерной. Код работает в современных браузерах, но вполне возможно API будет меняться.

• Последние версии Firefox и Chrome поддерживают все функции и превосходно работают с перетаскиванием.
• Опера может парсить файлы в JavaScript, но не поддерживает перетаскивание файлов и загрузку с помощю XMLHttpRequuest2
• IE и десктоповые версии Safari не поддерживают ничего из нужного API.

HTML и CSS

Далее идет код стандартной формы с инпутом типа файл. Единственное HTML5 нововведение в форме это атрибут “multiple” который позволяет пользователю выбирать любое количество файлов.

Со стороны сервера загрузка файлов будет проводиться средствани PHP, но независимо от того какую технологию вы используете на сервере JavaScript код останется тем же. Скрытое поле MAX_FILE_SIZE определяет 300,000 байт, размер будем проверять и на стороне клиента и на стороне сервера, чтобы предотвротить загрузку огромного размера файлов.

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">
	<fieldset>
		<legend>HTML Загрузка Файлов</legend>
		<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
		<div>
			<label for="fileselect">Выберите файлы для загрузки:</label>
			<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
			<div id="filedrag" >Или перетащите их сюда</div>
		</div>
		<div id="submitbutton">
			<button type="submit">Загрузить файлы</button>
		</div>
	</fieldset>
</form>

Элемент #filedrag будет использоваться как облясть в которую необходимо пренести файлы. Элемент в CSS стилях скрыт, но он будет отображаться средствами JavaScript если перетаскивание поддерживается браузером:

*{
     margin: 0px;
}
body{
     background: none repeat scroll 0% 0% #EFEFEF;
}
.wrapper{
     background: none repeat scroll 0% 0% #FFFFFF;
     margin: 150px auto;
     border: 2px solid #3DA8BA;
     padding: 10px;
     width: 500px;
}
fieldset{
	border:2px solid #efefef;
}
#filedrag{
	border-radius: 7px 7px 7px 7px;
	border: 2px dashed #3DA8BA;
	color: #555555;
	cursor: default;
	display: none;
	margin: 1em 0pt;
	padding: 1em 0pt;
	text-align: center;
	background:#f9f9f9;
}
#filedrag.hover {
	border-style: solid;
	box-shadow: 0pt 3px 4px #dbdbdb inset;
}
#messages{
	margin-top:10px;
	padding:5px;
	font-size:14px;
}
#messages p{
	border-bottom:1px solid #efefef;
	margin-bottom:5px;
}

Для элемента также определенн класс .hover который меняет стили когдо пользователь перетаксивает файлы на элемент. Браузеры не поддерживают стили :hover в этой ситуации, но мы можем добовлять класс спомощю Javascript когда происходит нужное событие.

File API

W3C File API предостовляет несколько объектов которые мы будем использовать:

• FileList: предостовляет массив выбранных файлов.
• File: предстовляет единственный файл.
• FileReader: интерфейс который позволяет нам считать информацию о файле со стороны клиента и использовать в JavaScript.

JavaScript события

Пришло время писать JavaScript код. Мы не будем использовать JavaScript фреймфроков, поэтому напишем пару фуннкций для сохронения нашего времени. Это функция которая достает нужный элемент по ид и функция выводящая сообщения

/* getElementById */
function $id(id) {
	return document.getElementById(id);
}

/* вывод сообщений */
function Output(msg) {
	var m       = $id("messages");
	m.innerHTML = msg + m.innerHTML;
}

Далее проверим поддержку File API и вызовем функцию инициализации Init():

/* проверка поддержки API */
if (window.File && window.FileList && window.FileReader){
	Init();
}
/* инициализация */
function Init(){

	var fileselect   = $id("fileselect"),
		filedrag     = $id("filedrag"),
		submitbutton = $id("submitbutton");

	/* выбор файла */
	fileselect.addEventListener("change", FileSelectHandler, false);

	/* проверка поддержки XHR2 */
	var xhr = new XMLHttpRequest();
	if (xhr.upload){

		/* сброс файла */
		filedrag.addEventListener("dragover", FileDragHover, false);
		filedrag.addEventListener("dragleave", FileDragHover, false);
		filedrag.addEventListener("drop", FileSelectHandler, false);
		filedrag.style.display = "block";

		/* удаление кнопки сабмитта */
		submitbutton.style.display = "none";
	}

}

Функция Init():

1. Устонавливает обработчик события к изменению инпута типа файл.
2. Отоброжает элемент #filedrag.
3. Устанавливает обработчики событий “dragover” и “dragleave” для динамического изменения стилей элемента #filedrag.
4. Устанавливает обработчик события “drop” для элемента #filedrag.
5. Скрывает кнопку сабмитта формы – он пока не требуется, так как мы будем просто анализировать файлы.

Также вы можете скрыть инпут типа файл, если перетаскивание поддерживается. Но я не буду этого делать чтобы пользователь мог воспользоваться удобным ему вариантом.

Проверка поддержки метода XMLHttpRequest.upload предотврощает проблемы с Оперой. Браузер поддерживает объекты File, FileList и FileReader, но не поддерживает перетаскивание файлов или XMLHttpRequest2. Поэтому мы отоброжаем информацию о файле, но оставляем скрытым элемент #filedrag.

Изменение стилей при переносе

Мало кто испытал перетаскивание файлов в браузер. На самом деле, многие опытные интернет пользователи считают это невозможным. Поэтому написали внутри элемента “перетащите сюда файлы”. А следующая функция будет добвлять класс к элементу, когда файл уже будет находится непосредственно над элементом, тем самым будут меняться стили.

// Файл над нужной областью
function FileDragHover(e){
	e.stopPropagation();
	e.preventDefault();
	e.target.className = (e.type == "dragover" ? "hover" : "");
}

Анализирование перетащенных или выбранных файлов

Будем использовать функцию FileSelectHandler() не зависимо от того обин или несколько файлов были выбранны или перетащенны на элемент #filedrag:

// выбор файла
function FileSelectHandler(e){

	FileDragHover(e);

	// проходимся по объекту FileList
	var files = e.target.files || e.dataTransfer.files;

	// парсим все объекты типа File
	for (var i = 0, f; f = files[i]; i++){
		ParseFile(f);
	}

}

Функция:

1. Вызываем функцию FileDragHover() чтобы убрать стиля при hover и предотвратить выполнение событий браузера. Это очень важно, так как браузер может попытаться отобразить файл
2. Проходимся по объекту FileList.
3. Наконец функция проходит по всем объектам типа File в объекте FileList и передает их как аргумент в функцию ParseFile()

function ParseFile(file) {
	Output(
		"<p>File information: <strong>" + file.name +
		"</strong> type: <strong>" + file.type +
		"</strong> size: <strong>" + file.size +
		"</strong> bytes</p>"
	);
}

Функция выводит информация используя три основные свойства представленные объектом File только для чтения.

• .name: имя файла (не включая путь к файлу)
• .type: MIME тип, например: image/jpeg, text/plain, и т.д.
• .size: размер файла в байтах

Плагин позволяет строить только одного типа графики, зато имеет большое количество настроек позволяющие подстраивать под дизайн своего сайта. Также есть возможность построения нескольких графиков одновременно.

Конечно 5Graph уступает другим подобным плагинам по функционалу построению диаграмм и все такое. Это все в дальнейшем будет нарабатываться, сейчас пока хотелось сделать его гибким при настройке дизайна. Ведь все остальные пдагины встречающиеся мне в основном не позволяют этого делать.

На этом пока все. Пожалуйста остовляйте свои комментарии, высказывайте свое мнение о 5Graph мне очень интересно. Сайт плагина размещен по адресу graph.prootime.ru

function workjscript(){
     $brows = get_browser();
     if($brows[javascript]){
         return true;  //то есть выводим форму
     }
     retunr false; //javascript не включен форму не выводим
}

Но а если get_browser() не поддерживается вашм хостингом также как и у меня, можно сделать попроще, просто выводить одно из обязательных полей через Javascritpt. В итоге без Javascript‘a пользователь, спам бот или кто еще пофигу будет получать форму без одного обязательного поля и не сможет отправить форму. Ну на примере wordpress для комментариев можно передать в качестве поля имени автора следующее:

'author' => '<div class="first_inputs">
	<span id="authorplace"></span>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#authorplace").html("\
				<input class=\"cm_name\" placeholder=\"Имя\" id=\"author\" name=\"author\" type=\"text\" value=\"'.esc_attr( $commenter['comment_author'] ) . '\"' . $aria_req . ' />\
			");
		});
	</script>',

Хороший ресурс для тестирования сайта

Я люблю Majordomo, потому что это самый надежный и качественный хостинг с отличным интерфейсом и хорошей техподдержкой! И пишу это я не потому что хочу iPhone4. На самом деле я долго выбирал хостинг, спрашивал на форумах, так искал, советовали много разных хостингов но почему то никто плохо не отзывался о Majordomo даже наоборот хвалили. Из за чего я и решил выбрать именно этот хостинг, и не прогадал. Это действительно достойный хостинг и далее все свои проекты планирую размещать только на majordomo, и всем советую.

Скачать бесплатно русский download master (даунлоад мастер) без регистрации и смс

Так как у них день рождение как бы, решил сделать им маленький сюрприз на HTML5:

Чуть чуть коряво, но зато от души!)

Сейчас я особо не занимаюсь этим сайтом так как готовлюсь к ЕГЭ, чтоб его. Так вот, все думаю когда то писали шпоры, а я решил написать прогу, скорее web приложение которое поможет мне при сдаче ЕГЭ.

Готовясь к информатике заметил что почти во всех заданиях B8 встречается одна и та же по типу задача, в которой обычно требуется найти последовательность букв с какой то позиции по какую то. Пример задания:

Строки (цепочки символов латинских букв) создаются по следующему правилу: первая строка состоит из одного символа – латинской буквы “A”. Каждая из последующих цепочек создается такими действиями: в очередную строку сначала дважды записывается предыдущая строка, затем справа приписывается буква, чей порядковый номер в алфавите соответствует номеру строки (на i – м шаге пишется “i” – я буква алфавита).
Вот первые 4 строки созданные по этому правилу:
1) A
2) AAB
3) AABAABC
3) AABAABCAABAABCD
Латинский алфавит (для справки):
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Запишите шесть символов подряд, стоящие в восьмой строке с 100-го по 105-место (считая слева направо).

Встречаются разные варианты этой задачи в некоторых требуется найти количество определенных букв в какой то строке, встречаются еще и с русским алфавитом.

Итак цель написать web приложение которое смогло бы решить все варианты этой задачи и была бы удобна для использования с телефона. Не знаю о чем подумали вы, но я подумал о jQuery Mobile. Почитав немного документации написал разметку. Приложение будет состоять из одной страницы в которой будет выводиться форма состоящая из 4х полей это: поле для выбора алфавита, количества строк, начальной позиции и конечной позиции. Стилей писать не придется так как jQuery Mobile так устроен, остается написать разметку

Получилась она вот такой:

   <div data-role="page" data-theme="c">
       <div data-role="header">
           <h1>Информатика B8</h1>
       </div>
       <div data-role="content">
           <form action="" method="get">
               <div data-role="fieldcontain">
                   <label for="select-choice-1" class="select">Выберите алфавит:</label>
                   <select name="lang" id="select-choice-1">
					   <option value="lt">Латинский</option>
					   <option value="ru">Русский</option>
                   </select>
               </div>
               <div data-role="fieldcontain">
                   <label for="line">Количество строк:</label>
                   <input type="number" name="line" id="line">
               </div>
               <div data-role="fieldcontain">
                   <label for="beg_pos">Начальная позиция:</label>
                   <input type="number" name="beg_pos" id="beg_pos">
               </div>
               <div data-role="fieldcontain">
                   <label for="end_pos">Конечная позиция:</label>
                   <input type="number" name="end_pos" id="end_pos">
               </div>
               <button type="submit" data-theme="b" name="calc" value="calc">Посчитать</button>
           </form>
       </div>
       <div data-role="footer">
           <h4><a href="http:\\prootime.ru">prootime.ru</a></h4>
       </div>
   </div>

В header’е нужно подключить вот эти скрипты:

stylesheet - http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css
script - http://code.jquery.com/jquery-1.4.3.min.js
script - http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js

На вид примерно что то вроде этого:

Осталось написать PHP код. Он будет очень даже простой, просто поставим на сабмит формы PHP код и будем выполнять алгоритм который был дан в задании:

if(!empty($_REQUEST['calc'])){

   //язык
   $language = $_REQUEST['lang'];

   if($language == 'lt'){

       $arr = range('A','Z');

   }
   else{

       $arr = array('А','Б','В','Г','Д','Е','Ё','Ж','З','И','Й','К','Л','М','Н','О','П','Р','С','Т','У','Ф','Х','Ц','Ч','Ш','Щ','Ъ','Ы','Ь','Э','Ю','Я');

   }

   //номер строки
   $str_num = $_REQUEST['line'];

   //начальная и конечная позицим
   $beg_pos = $_REQUEST['beg_pos'];
   $end_pos = $_REQUEST['end_pos'];

   if($beg_pos > $end_pos){

       echo 'Ошибка! Значения начала отреза больше конеца.';

   }
   else{

       //конечная строка
       $end_str = '';

       for($i = 0; $i <= $str_num-1; $i++){

           $end_str = $end_str.$end_str.$arr[$i];

       }

       echo mb_substr($end_str, $beg_pos-1, $end_pos - $beg_pos + 1, 'utf8');
       echo '
Всего букв - '.strlen($end_str);

       for($i = 0; $i <= $str_num-1; $i++){

           echo '
'.$arr[$i].' - '.mb_substr_count($end_str,$arr[$i], 'utf8');

       }

   }

}

Единственное на что бы хотел обратить внимание это на функции начинающиеся с mb_ это нестандартные функции и требуют модуль mbstring если он не подключен то они конечно не сработают. А вообще выполняют то же самое что эти же функции без mb_. Почему я их использовал, потому что этим функциям можно передать третьим параметром кодировку в которой функция должна работать. А так как нам нужно работать еще и с кирилицей это то что нам нужно.

1. Функция include() – эта функция будет просто подключать javascript’овый файл, без всяких извращений, используя функцию document.write():

function include(url) {

    document.write('<' + 'script');
    document.write(' language="javascript"');
    document.write(' type="text/javascript"');
    document.write(' src="' + url + '">');
    document.write('');

}

2. Функция include_inhead() – функция подключает файл в тег head, а не где попало как это делает предыдущая функция, а также подключение происходит более правильным путем так как используется функция document.createElement:

function include_inhead(url) {

    var html_doc = document.getElementsByTagName('head').item(0);
    var js = document.createElement('script');

    js.setAttribute('language', 'javascript');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', url);
    html_doc.appendChild(js);

    return false;

}

3. Функция require_once() – функция будет не просто подключать файл, а будет еще проверять его на подключенность, то есть аналог PHP функции rquire_once(). Для реализации такого эффекта нам во первых понадобится создать глобальный массив в котором будем записывать все включаемые файлы:

var included_files = new Array();

Дальше придется написать функцию которая будет проверять вхождение подключаемых файла в массив, то есть проверять на включенность:

function in_array(needle, haystack) {
    for (var i = 0; i < haystack.length; i++) {

		if (haystack[i] == needle) {

			return true;

        }

    }

    return false;
}

Дело осталось за малым, в конечной функции проверяем переданный url на включенность и подключаем его с помощью функции include_inhead() (2ая функция):

function require_once(url) {

	if (!in_array(url, included_files)) {

		included_files[included_files.length] = url;
		include_inhead(url);

    }

}

В демке представлено 4 селекта смотрим.

Вконтакте извините я спер у вас оформление и цвета селекта .

Возьмем обычный select с несколькими option примерно вот:

<select id="ourselect1">
           <option value="eee">Значение 19</option>
           <option value="222">Значение 18</option>
           <option value="444">Значение 17</option>
           <option value="123">Значение 16</option>
           <option value="122">Значение 15</option>
           <option value="113">Значение 14</option>
           <option value="124">Значение 13</option>
</select>

Обернем его в div с классом “sel_wrap”, в начале которого выстроим структуру нашего селекта дивами. Если представить это все дело на картинке то получится следующая картина:

А код получится следующим:

<div class="sel_wrap">
    <div class="sel_imul">
        <div class="sel_selected">
            <div class="selected-text">Значение 19</div><div class="sel_arraw"></div>
        </div>
        <div class="sel_options">
            <div class="sel_option" value="eee">Значение 19</div>
            <div class="sel_option" value="222">Значение 18</div>
            <div class="sel_option" value="444">Значение 17</div>
            <div class="sel_option" value="123">Значение 16</div>
            <div class="sel_option" value="122">Значение 15</div>
            <div class="sel_option" value="113">Значение 14</div>
            <div class="sel_option" value="124">Значение 13</div>
        </div>
    </div>
    <select id="ourselect1">
        <option value="eee">Значение 19</option>
        <option value="222">Значение 18</option>
        <option value="444">Значение 17</option>
        <option value="123">Значение 16</option>
        <option value="122">Значение 15</option>
        <option value="113">Значение 14</option>
        <option value="124">Значение 13</option>
    </select>
</div>

Далее приступим к стилям. Естественно скрываем наш обычный селект, а структуру эмилирующую селект стилизуем как нам хочется:

.sel_wrap{
    background:#efefef;
    margin-bottom:5px;
    padding:7px;
}
.sel_wrap select{
    display:none;
}
.sel_imul{
    width:300px;
}
.sel_imul .sel_selected{
    background:#fff;
    border:1px solid #bbb;
    padding:3px 6px;
    font-size:14px;
    font-family:Times;
    cursor:pointer;
    position:relative;
}
.sel_imul.act .sel_selected{
    background:#efefef;
}
.sel_selected .sel_arraw{
    height:100%;
    width:20px;
    background:url('http://bit.ly/gudLNa') 50% 50% no-repeat;
    position:absolute;
    top:0px;
    right:0px;
}
.sel_imul:hover .sel_selected .sel_arraw{
    background-color:#e0e0e0;
    border-left:1px solid #bbb;
}
.sel_imul.act .sel_selected .sel_arraw{
    background-color:#e0e0e0;
    border-left:1px solid #bbb;
}
.sel_imul .sel_options{
    background:#fff;
    border:1px solid #dbdbdb;
    border-top:none;
    overflow:auto;
    position:absolute;
    width:298px;
    display:none;
    z-index:10;
}
.sel_options .sel_option{
    padding:3px 4px;
    font-size:14px;
    font-family:Times;
    border:1px solid #fff;
    border-right:none;
    border-left:none;
}
.sel_options .sel_option:hover{
    border-color:#dbdbdb;
    cursor:pointer;
}
.sel_options .sel_option.sel_ed{
    background:#dbdbdb;
    border-color:#dbdbdb;
}

/*second variant*/
.sec .sel_imul{
    width:200px;
}
.sec .sel_imul .sel_selected{
    border:1px solid #C0CAD5;
}
.sel_imul.act .sel_selected{
    background:#fff;
}
.sec .sel_imul:hover .sel_selected .sel_arraw{
    background-color:#e1e8ed;
    border-left:1px solid #d2dbe0;
}
.sec .sel_imul.act .sel_selected .sel_arraw{
    background-color:#e1e8ed;
    border-left:1px solid #d2dbe0;
}
.sec .sel_imul .sel_options{
    background:#fff;
    border:1px solid #d2dbe0;
    width:198px;
}
.sec.overf .sel_imul .sel_options{
    height:100px;
}
.sec .sel_options .sel_option:hover, .sec .sel_options .sel_option.sel_ed{
    background:#587da1;
    border:1px solid #2a5883;
    color:#fff;
    cursor:pointer;
}
.sec .sel_imul .sel_selected .sel_arraw{
    background-image:url('http://vkontakte.ru/images/darr_dd_out.gif');
}

.sec.round .sel_imul .sel_selected{
    -webkit-border-radius:5px;
}
.sec.round .sel_imul .sel_selected .sel_arraw{
    -webkit-border-radius:0 5px 5px 0;
}
.sec.round .sel_imul .sel_options{
    -webkit-border-radius:0 0 5px 5px;
}
/*green*/
.sec.green .sel_imul .sel_selected{
    border-color:#FFAD99;
}
.sec.green .sel_imul:hover .sel_selected .sel_arraw,
.sec.green .sel_imul.act .sel_selected .sel_arraw{
    background-color:#FFD6CC;
    border-left:1px solid #FFAD99;
}
.sec.green .sel_options .sel_option:hover,
.sec.green .sel_options .sel_option.sel_ed{
    background:#FF9980;
    border:1px solid #FF704D;
    color:#fff;
    cursor:pointer;
}

Здесь уже стили предусматривающие работу javascript’а, и несколько типов селектов.

Дальше приступим к javascript‘у. Во первых сделаем так чтобы при клике на див эмулирующий select, открывался или закрывался список option’ов:

$('.sel_imul').live('click', function() {

    $('.sel_imul').removeClass('act');
    $(this).addClass('act');

    if ($(this).children('.sel_options').is(':visible')) {

        $('.sel_options').hide();

    }
    else {

        $('.sel_options').hide();
        $(this).children('.sel_options').show();

    }

});

Теперь пишем событие которое будт менять значение обычного, скрытого, селекта и значение у эмулирующего селекта:

$('.sel_option').live('click', function() {

    //меняем значение на выбранное
    var tektext = $(this).html();
    $(this).parent('.sel_options').parent('.sel_imul').children('.sel_selected').children('.selected-text').html(tektext);

    //активируем текущий
    $(this).parent('.sel_options').children('.sel_option').removeClass('sel_ed');
    $(this).addClass('sel_ed');

    //устанавливаем значение для селекта
    var tekval = $(this).attr('value');
    tekval = typeof(tekval) != 'undefined' ? tekval : tektext;
    $(this).parent('.sel_options').parent('.sel_imul').parent('.sel_wrap').children('select').children('option').removeAttr('selected').each(function() {
        if ($(this).val() == tekval) {
            $(this).attr('selected', 'select');
        }
    });
});

Ну еще напишем меленький код который будет закрывать селект при холостом клике, blur так зказать:

var selenter = false;
$('.sel_imul').live('mouseenter', function() {
    selenter = true;
});
$('.sel_imul').live('mouseleave', function() {
    selenter = false;
});
$(document).click(function() {
    if (!selenter) {
        $('.sel_options').hide();
        $('.sel_imul').removeClass('act');
    }
});

Напишем функцию которая будет превращать из обычного селекта такой т.е. писать за нас код, назовем его reselect():

function reselect(select, addclass) {

    addclass = typeof(addclass) != 'undefined' ? addclass : '';

    $(select).wrap('<div class="sel_wrap ' + addclass + '"/>');

    var sel_options = '';
    $(select).children('option').each(function() {
        sel_options = sel_options + '<div class="sel_option" value="' + $(this).val() + '">' + $(this).html() + '</div>';

    });

    var sel_imul = '<div class="sel_imul">\
                <div class="sel_selected">\
                    <div class="selected-text">' + $(select).children('option').first().html() + '</div>\
                    <div class="sel_arraw"></div>\
                </div>\
                <div class="sel_options">' + sel_options + '</div>\
            </div>';

    $(select).before(sel_imul);

}

Здесь что то нормально не удается показать функцию, можете посмотреть ее в демке

@media all and (-webkit-min-device-pixel-ratio:0) {
  /*здесь стили для хрома*/
}

Единственное надо отметить что этот хак будет также работать и на Safari, так как у них один движок. Именно под хром так и не нашел хак, кто обладает информацией о таком хаке пишем в комментарии