Как средцтвами html вставить на страничку маленький квадратик?
 

Смысл квадратика - показывает цвет и при клике по нему появляется список цветов (как в ворде или фотошопе).
Пока что просто поставил <input type="text" value="" readonly style="width:10px; height:10px; border:1px solid white; cursor:pointer; background-color:red;">, который перекрашивается при выборе цвета, но это как бы немного не то.

Ну, в общем, надо что-то типо:
цвет: ⱼ
(токо квадратик чтобы был залитый цветом)

Чего бы такое придумать?
Потому что делать инпутом это как бы не того (хотя имхо оригинально).

если я правильно понял, нужен выпадающий список цветов, и если это действительно так, то я бы на скрипт не вешал, а открывал бы список с помощью hover и pointer не дал бы, примерно так:
[code]
<style>
section{display:inline-block**
section:hover ul{display:block**
div{background:#000;height:16px;position:relative;right:0;top:0;width:16px;z-index:2**
ul{border:1px solid #FC0;display:none;height:50px;left:4px;padding:20px;position:absolute;top:-12px;width:200px;z-index:1**
ul li{background:red;cursor:pointer;display:inline;height:16px;list-style-type:none;margin-left:5px;width:16px**
</style>
<section>
<div></div>
<ul>
<li>color1</li>
<li>color2</li>
<li>color3</li>
<li>color4</li>
<li>color5</li>
<li>color6</li>
<li>color7</li>
<li>color8</li>
</ul>
</section>
[/code]

Может лучше интерфейс как в фотошопе?
[url]http://www.colorzilla.com/gradient-editor/[/url]
Распарсите, и все будет.

2-vk > 1-reason >
ну в принципе, да, в конечном итоге мне нужен колор-пикер.
Но на данный момент нужен вот такой вот синий квадратик, как тут [url]http://www.colorzilla.com/gradient-editor/[/url]
Color: |____|

Ну, т.е. синее поле. не знаю как выразиться правильней.
Но там оно сделано дивом, а хотелось бы простым инлайновым объектом (или символом).

символа "синее поле" пока не существует))) может все таки див?)

"простым инлайновым объектом" - что это в Вашем понимании? Тот-же div с display:inline-block простой инлайновый div. :)

Или ройте в псевдографику
[url]http://ru.wikipedia.org/wiki/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0[/url]

5-vk >
незя подогнать ширину/высоту как надо.

6-vk >
та уже рыл. И как назло, квадратика нету.

4-reason >
та скорей всего прийдется обойтись инпутом и не парица. =)

7-Гавайские субтитры>
Почему div нельзя подогнать?
Ничего проще нет, чем сделать квадратный div, который будет менять цвет.

7-Гавайские субтитры >
1) div {display:block; width:40px;height:40px; background:blue;**
2) div {display:inline-block; width:40px;line-height:40px; background:blue;**

вы что не знаете, что автор этого топика блочную верстку и стили называет костылями, и его мозг не в силах осилить её!
Он понимает только табличную верстку!

9-brezhnev >
с inline-block самое то для дива (после некоторой рихтовки), но блин оно как-то выравнивается странно.
[url]http://jsfiddle.net/SCX6j/1/[/url]
первый красный квадрат это <imput>, второй - див на вашей основе что вы дали.
В ИЕ сдвигается, скотина, по вертикали, относительно текста. =(

11-Гавайские субтитры >убери {vertical-align: middle;**

12-brezhnev >
тогда оно подскакивает в опере =)
а вот <input> (как назло) стоит как надо.

и учитывай что DIV у тебя занимает по высоте 12 пикс (10 высота и 2 бордер), => высота строки должна быть 12пикс (текста соответственно)

14-brezhnev >
та ваще поставил 9pt, как и текст. да и фихсним.
Все равно, спасибо за подсказку с инлайн-блоком. Не знал, четсно говоря.

15-Гавайские субтитры >пжл

input type="text" — предназначен для создания текстового поля, замените его на div и вешайте на него какие угодно скрипты.
расскажите, зачем вам там именно input type="text", почему не textarea, например? её тоже можно в синий цвет покрасить, а верстать будет еще веселее!

17-reason >
оно скачет в разных браузерах, если сделать div.

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

Попробуим =)

С инлайновым блоком, оказывается, не все так гладко.

а именно с компатабилити.
[url]http://caniuse.com/inline-block[/url]