Скругление полей у Label

@ansi_str · Регистрация: 22.09.2011

Author24 — интернет-сервис помощи студентам

Здравствуйте - возможно ли скругление краёв у label?
Я их скруглил, но проблема вот в чём - она должна быть не видима до нажатия по кнопке. Однако обрамление по бокам видно....Как можно обойти данную проблему??

@SNOOPYKZ · 30.10.2011, 09:14

1. значит тебе нужно сделать event по-срабатыванию которого будет показываться рамка
2. по-умолчанию, стиль твоего label будет

CSS

1	border: none

3. как только event сработает, у label должен быть стиль (например)

CSS

1	border: 1px solid gray

В некоторых браузерах рамка будет квадратной, но в других (например FF, Chrome) она удет круглой, если сделать стиль, как показано здесь

@ansi_str · 31.10.2011, 08:18 **[ТС]**

А можно как то сделать, чтобы для всех браузеров была круглой?

@SNOOPYKZ · 31.10.2011, 08:40

Сообщение от ansi_str

А можно как то сделать, чтобы для всех браузеров была круглой?

это "святой грааль" в теме о круглых углах

Есть только один "тупой" способ, получить качественные круглые углы - картинки.
"Тупой" - потому что тупой

, сорри за выражения, но так и есть.
Но т.к. он единственный, то считается лучшим

Добавлено через 10 минут
Если что, мое мнение таково: быстро работающий сайт - лучше, чем долго грузящийся и лишь чуть-чуть красивше.

@ansi_str · 31.10.2011, 09:02 **[ТС]**

Спасибо, но не хочется использовать CSS 3
Я не совсем понял - как сделать по событию....Можно примерчик?

@SNOOPYKZ · 31.10.2011, 09:44

HTML5

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <style>
        .input-container
        {
            border: 1px solid silver;
            width: 150px;
            height: 25px;
            padding: 5px;
            -moz-border-radius: 5px; /* Firefox */
            -webkit-border-radius: 5px; /* Safari, Chrome */
            border-radius: 5px; /* CSS3 */
            behavior: url(http://yoursite.com/border-radius.htc);
        }
        
        .input-container input
        {
            border: none;
            width: inherit;
            height: inherit;
        }
        
        .input-container-active {
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <script>
        $(function(){
            $('.input-container').mouseover(function(){
                $(this).addClass('input-container-active');
            }).mouseout(function(){
                $(this).removeClass('input-container-active');
            });
        });
    </script>
    <table style="width: 100%; height: 100%">
        <tr>
            <th>
                <div class="input-container"><input /></div>
            </th>
        </tr>
    </table>
</body>
</html>

@Alligieri · 31.10.2011, 15:04

Сообщение от SNOOPYKZ

Есть только один "тупой" способ, получить качественные круглые углы - картинки.

Не один, JQuery Corners - очень удобный плагин

@SNOOPYKZ · 31.10.2011, 15:07

Сообщение от Alligieri

Не один, JQuery Corners - очень удобный плагин

со всей уверенностью говорю - нет. Это не кроссброузерное решение. Об этом говорит сам код jQuery и его CSS. + "практика-практика-практика".

@Alligieri · 31.10.2011, 15:42

Сообщение от SNOOPYKZ

Это не кроссброузерное решение. Об этом говорит сам код jQuery и его CSS. + "практика-практика-практика".

А моя практика говорит что нормальное решение, прекрасно заокругливает углы от IE 7+, если подучить разные нюансы - от broder-radius не отличить

@SNOOPYKZ · 31.10.2011, 16:51

Сообщение от Alligieri

А моя практика говорит что нормальное решение, прекрасно заокругливает углы от IE 7+, если подучить разные нюансы - от broder-radius не отличить

Тогда давайте на этом и порешим: от IE 7+. Если автора это устраивает, то он может это юзать, хотя, если говорить о IE7+, то того что описано выше более чем достаточно, заметьте, без применения JS.

Заранее ответ тем, кто вспомнит о jQuery, у него задача круглых углов решается идентично, через CSS.

А если автор метит на целевую аудиторию с деньгами: а это в основном офисные работники с корпоративными правилами больших компаний, то по-опыту скажу: у них до сих пор стандарт IE6 и XP, во всяком случаи у "большой четверки" и близ стоящих рядом с ними - точно.

@ansi_str · 01.11.2011, 08:49 **[ТС]**

Что то я немного не допонял, плагин это хорошо - покапаюсь на досуге

А не CSS3 можно как сделать от IE 7+?

@SNOOPYKZ · 01.11.2011, 12:02

Сообщение от ansi_str

А не CSS3 можно как сделать от IE 7+?

Не CSS, можно несколькими способами:
1. Куча div-ов
(плюсы) - весит мало и работает
(минусы) - углы не гадкие, как хотелось бы
2. Рисование Javascript-ом
(плюсы) - весит мало и работает
(минусы) - ты можешь покрыться "седьмым" потом, но так и не добиться 100%-ного совпадения краев уголка с линиями, что бы смотрелось ровно и красиво
3. Картинка
(плюсы) - работает и кроссбраузерно
(минусы) - весит по-больше, а если хочшеь поменять фон, то придется также перерисоватьв се уголки

@ansi_str 57 / 57 / 15 Регистрация: 22.09.2011 Сообщений: 319
		1
	Скругление полей у Label 28.10.2011, 14:39. Показов 2203. Ответов 11 Метки нет (Все метки) Здравствуйте - возможно ли скругление краёв у label? Я их скруглил, но проблема вот в чём - она должна быть не видима до нажатия по кнопке. Однако обрамление по бокам видно....Как можно обойти данную проблему?? 0

@ansi_str 57 / 57 / 15 Регистрация: 22.09.2011 Сообщений: 319
	31.10.2011, 08:18 [ТС]	3
	А можно как то сделать, чтобы для всех браузеров была круглой? 0

@SNOOPYKZ 102 / 102 / 13 Регистрация: 22.10.2011 Сообщений: 328
	31.10.2011, 08:40	4
	Сообщение от ansi_str А можно как то сделать, чтобы для всех браузеров была круглой? это "святой грааль" в теме о круглых углах Есть только один "тупой" способ, получить качественные круглые углы - картинки. "Тупой" - потому что тупой , сорри за выражения, но так и есть. Но т.к. он единственный, то считается лучшим Добавлено через 10 минут Если что, мое мнение таково: быстро работающий сайт - лучше, чем долго грузящийся и лишь чуть-чуть красивше. 1

@ansi_str 57 / 57 / 15 Регистрация: 22.09.2011 Сообщений: 319
	31.10.2011, 09:02 [ТС]	5
	Спасибо, но не хочется использовать CSS 3 Я не совсем понял - как сделать по событию....Можно примерчик? 0

@Alligieri CEO 2258 / 1248 / 57 Регистрация: 16.03.2009 Сообщений: 3,588
	31.10.2011, 15:04	7
	Сообщение от SNOOPYKZ Есть только один "тупой" способ, получить качественные круглые углы - картинки. Не один, JQuery Corners - очень удобный плагин 0

@SNOOPYKZ 102 / 102 / 13 Регистрация: 22.10.2011 Сообщений: 328
	31.10.2011, 15:07	8
	Сообщение от Alligieri Не один, JQuery Corners - очень удобный плагин со всей уверенностью говорю - нет. Это не кроссброузерное решение. Об этом говорит сам код jQuery и его CSS. + "практика-практика-практика". 0

@Alligieri CEO 2258 / 1248 / 57 Регистрация: 16.03.2009 Сообщений: 3,588
	31.10.2011, 15:42	9
	Сообщение от SNOOPYKZ Это не кроссброузерное решение. Об этом говорит сам код jQuery и его CSS. + "практика-практика-практика". А моя практика говорит что нормальное решение, прекрасно заокругливает углы от IE 7+, если подучить разные нюансы - от broder-radius не отличить 0

@SNOOPYKZ 102 / 102 / 13 Регистрация: 22.10.2011 Сообщений: 328
	31.10.2011, 16:51	10
	Сообщение от Alligieri А моя практика говорит что нормальное решение, прекрасно заокругливает углы от IE 7+, если подучить разные нюансы - от broder-radius не отличить Тогда давайте на этом и порешим: от IE 7+. Если автора это устраивает, то он может это юзать, хотя, если говорить о IE7+, то того что описано выше более чем достаточно, заметьте, без применения JS. Заранее ответ тем, кто вспомнит о jQuery, у него задача круглых углов решается идентично, через CSS. А если автор метит на целевую аудиторию с деньгами: а это в основном офисные работники с корпоративными правилами больших компаний, то по-опыту скажу: у них до сих пор стандарт IE6 и XP, во всяком случаи у "большой четверки" и близ стоящих рядом с ними - точно. 0

@ansi_str 57 / 57 / 15 Регистрация: 22.09.2011 Сообщений: 319
	01.11.2011, 08:49 [ТС]	11
	Что то я немного не допонял, плагин это хорошо - покапаюсь на досуге А не CSS3 можно как сделать от IE 7+? 0

@SNOOPYKZ 102 / 102 / 13 Регистрация: 22.10.2011 Сообщений: 328
	01.11.2011, 12:02	12
	Сообщение от ansi_str А не CSS3 можно как сделать от IE 7+? Не CSS, можно несколькими способами: 1. Куча div-ов (плюсы) - весит мало и работает (минусы) - углы не гадкие, как хотелось бы 2. Рисование Javascript-ом (плюсы) - весит мало и работает (минусы) - ты можешь покрыться "седьмым" потом, но так и не добиться 100%-ного совпадения краев уголка с линиями, что бы смотрелось ровно и красиво 3. Картинка (плюсы) - работает и кроссбраузерно (минусы) - весит по-больше, а если хочшеь поменять фон, то придется также перерисоватьв се уголки 1