Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #31 (permalink)  
Старый 04.07.2012, 02:03
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Немного поправил пример выше, в ИЕ косячно работал
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #32 (permalink)  
Старый 04.07.2012, 02:45
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

вот полностью рабочий пример, с селектором input[type="file"]:focus ~ div ИЕ почему-то косячет, поэтому пришлось скриптом менять класс.
<!DOCTYPE html>
<html>
	<head>
	<style>
    .file_field {
        position: relative;
        width: 200px;
        height: 22px;
 
        font-weight: bold;
 
        background: -webkit-linear-gradient(top, #abd8f0, #446f86);
        background: -moz-linear-gradient(top, #abd8f0, #446f86);
        background: -o-linear-gradient(top, #abd8f0, #446f86);
        background: -ms-linear-gradient(top, #abd8f0, #446f86);
        background: linear-gradient(top, #abd8f0, #446f86);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#abd8f0, endColorstr=#446f86);
 
        color: #ffc97d;
 
		border-radius: 6px;
    }
    .file_field div {
        float: right;
		font-size: 15px;
		text-align: center;
		width: 59px;
		padding-top: 1px;
    }
    .file_field span {
        display: block;
        float: left;
        width: 140px;
        border: 1px solid #999;
        border-right: 0;
        padding: 0;
        margin: 0;
        height: 20px;
        background-color: #fff;
        color: red;
        overflow: hidden;
        white-space: nowrap;
		border-radius: 6px 0 0 6px;
    }
    .file_field input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
		padding-top: 3px;
		margin: 0;
		border: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        filter: Alpha(opacity=0);
    }
    /* убираем стандартную пунктирную фокусировку */
    .file_field input[type="file"]:focus {
        outline: 0;
	}
    /*
	* стиль кнопки при фокусе, класс file_focus нужен для ИЕ
	* потому что ИЕ что-то тупит с селектором
	* input[type="file"]:focus ~ div
	* смотрите события onfocus, onblur
	*/
    .file_focus div,
	.file_field input[type="file"]:focus ~ div {
        color: #fff;
    }
	</style>
	</head>
	<body>

<div class="file_field">
    <input type="file" onchange="this.nextSibling.innerHTML=this.value" onfocus="this.parentNode.className='file_field file_focus';" onblur="this.parentNode.className='file_field';" /><span></span><div>Browse</div>
</div>
<br />
<div class="file_field">
    <input type="file" onchange="this.nextSibling.innerHTML=this.value" onfocus="this.parentNode.className='file_field file_focus';" onblur="this.parentNode.className='file_field';" /><span></span><div>Browse</div>
</div>
<br />
<div class="file_field">
    <input type="file" onchange="this.nextSibling.innerHTML=this.value" onfocus="this.parentNode.className='file_field file_focus';" onblur="this.parentNode.className='file_field';" /><span></span><div>Browse</div>
</div>

	</body>
</html>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 04.07.2012 в 02:57.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Opera nowrap запретить перенос строк, div ... Gozar (X)HTML/CSS 12 11.04.2012 21:24
Opera не выполняет style.fontSize=... в поле input Маэстро Opera, Safari и др. 6 20.06.2011 12:03
[newbie question] input (file) -> submit -> php(json) zatoichi AJAX и COMET 1 18.01.2011 12:18
ширина Input внутри div jetli13 (X)HTML/CSS 3 28.09.2010 19:01
Обработка нескольких file input Temlekur Работа 8 21.01.2010 18:30