удобные и красивые формы в Firefox для win < XP и Linux

[tymofiy]

Что мне нравится в Опере и в Windows XP - это элементы управления. Соответствующие выбранной пользоватетелем теме, чутко реагирующие на проносящуюся над ними мышь. Радующие пользователя удобством и изяществом.

В отличие от серых блоковых кнопок, свойственных всем виндам кроме XP. Впрочем, Firefox под Линуксом тоже показывает на страницах только их. Меня этот факт сильно удивляет и разочаровывает — ведь весь интерфейс с успехом поддерживает темы gtk.

Что ж, сегодня таки удалось создать кнопки, вписывающиеся в остальной десктоп.

Пробовал создать в точности кнопку из gonxical, но на белом фоне она смотрится не очень. Потому подбирал и доводил. Что получилось - видно на скриншоте.

Также:

• поля ввода текста получили модные тонкие рамочки, текущее выделяется черной
• текстареа маленькой больше не будет никогда. и всякие малодумающие вебмастеры мне не указ
• ссылки на почту четко выделяются среди остальных

Для счастливых обладателей нормальныххороших браузеров —
Подобный эффект достигается прописыванием в userContent.css

input[type=text], input[type=password], textarea {border:1px solid #999; padding-left: 3px;}
input[type=text]:focus, input[type=password]:focus, textarea:focus {border:1px solid black;}

textarea {width:100%; min-height:140px}

input[type="button"],
input[type="submit"] {
	font: bold 12px Verdana;
	color: #484848;
	background: url("button.png") bottom right no-repeat;
	border-width: 1px;
	border-style: solid;
	border-color: #adaa9c #888 #888 #adaa9c;
	padding: 1px 6px;
	-moz-border-radius: 4px;
}

input[type="button"]:hover,
input[type="submit"]:hover {
	color: #000;
	border-color: #333 #000 #000 #333;
}

a[href^="mailto:"]:before { content: "\2709  " }

Update Project Homepage

Comments

[xumix.livejournal.com]

странная штука, у меня работает все, кроме бэкграунда для кнопки и по умолчанию рамки у инпутов остались такими же, тоесть onfocus нормально работает.. а которые input[type=text], input[type=password], textarea {border:1px solid #999; padding-left: 3px;}
почему-то нехотят.
кстати насчет button.png, куда его положить-то надо ? пробовал в корень мозиллы и рядом с usercontent.css - не помогает, пробовал даже file:///c:/Documents%20and%20Settings/xumix/Application%20Data/Mozilla/Firefox/Profiles/jd1o6jm7.default/chrome/button.png") bottom right no-repeat;, тоже не помогает

[tymofiy.livejournal.com]

А если на тестовой странице попробовать? записать в
локальный html файл пару инпутов и сабмитов и посмотреть как оно?

картинку кнопки нужно ложить рядом с userContent.css

[xumix.livejournal.com]

попробовал на тестовом файлике - та же фигня.

[tymofiy.livejournal.com]

тогда не знаю. Это хинт как раз из серии YMMV :)

[xumix.livejournal.com]