textbox и круглые углы

Heartbeat · February 21, 2012

Привет!

Пытаюсь сделать кроссбраузерные закругленные углы для textbox.

Помогите пожалуйста, кто не занят.

Проблемы такие:

1) div блок, содержащий картинку с левой границей не хочет растягиваться на всю высоту.

2) div блок, который рисует верхнюю границу, выезжает за пределы div блока, который содержит рисунок правого верхнего уголка.

посмотреть можно тут

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=8" />	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
<title>
Redmond
</title>
<style type="text/css">
	.input-multi-text {
		/*  */
		margin-top: 30px;
		float: left;
		clear: both;
		/*  */		
	}
	.input-multi-text textarea {
		outline: none;
		height: 200px;
		width: 500px;
		border: 0;
		display: block;
		margin: 0 auto;
	}
	.multi-top {
		width: 100%;
		height: 4px;		
	}
	.multi-top .mt-left {
		height: 4px;
		width: 4px;
		float: left;
		background: url('images/input-multi-text-ltc.png') no-repeat;
	}
	.multi-top .mt-right {
		height: 4px;
		width: 4px;
		float: left;
		background: url('images/input-multi-text-rtc.png') no-repeat;
	}
	.multi-top .mt-top {
		height: 4px;		
		float: left;
		width: 100%;
		margin-right: -8px;
		background: url('images/input-multi-text-top.png') repeat-x;
	}


	.multi-bottom {
		width: 100%;
		height: 4px;		
	}
	.multi-bottom .mb-left {
		height: 4px;
		width: 4px;
		float: left;
		background: url('images/input-multi-text-lbc.png') no-repeat;
	}
	.multi-bottom .mb-right {
		height: 4px;
		width: 4px;
		float: left;
		background: url('images/input-multi-text-rbc.png') no-repeat;
	}
	.multi-bottom .mb-bottom {
		height: 4px;		
		float: left;
		width: 100%;
		margin-right: -8px;		
		background: url('images/input-multi-text-bottom.png') repeat-x;
	}


	.multi-middle {
		width: 100%;
		height: 100%;
	}
	.multi-middle .mm-left {
		height: 100%;
		width: 4px;
		float: left;
		margin-left: -100%;
		background: url('images/input-multi-text-left.png') repeat-y;
	}
	.multi-middle .mm-right {
		height: 100%;
		width: 4px;
		float: left;
		margin-left: -4px;
		background: url('images/input-multi-text-right.png') repeat-y;
	}

	.input-multi-text textarea {		
		/*float: left;*/

	}

	.multi-bottom {
		float: left;
	}

</style>
</head>
<body>

<!-- Многострочное поле -->
<div class="input-multi-text">
	<div class="multi-top">
		<div class="mt-left"></div>
		<div class="mt-top"></div>
		<div class="mt-right"></div>
	</div>
	<div class="multi-middle">
		<div style="width: 100%; float: left;">
			<div style="margin: 0 4px;"><textarea cols="40" rows="5"></textarea></div>
		</div>
		<div class="mm-left"> </div>		
		<div class="mm-right"> </div>
	</div>	
	<div class="multi-bottom">
		<div class="mb-left"></div>
		<div class="mb-bottom"></div>
		<div class="mb-right"></div>
	</div>
</div>
</body>
</html>

Switch74 · February 21, 2012

я бы сделал так:


<style>
/*Контейнер для блока с закругленными углами*/
.b{position:relative;padding:5px;}
/*Верхняя и нижняя линии*/
.b-t{position:absolute;top:0px;left:5px;right:5px;height:5px;	background:#999;}
.b-b{position:absolute;bottom:0px;left:5px;right:5px;height:5px;	background:#999;}
/*Левая и правая линии*/
.b-l{position:absolute;top:5px;left:0px;bottom:5px;width:5px;	background:#999;}
.b-r{position:absolute;top:5px;right:0px;bottom:5px;width:5px;	background:#999;}
/*Верхние левый и правый уголки*/
.b-tl{position:absolute;top:0px;left:0px;width:5px;height:5px;	background:#ddd;}
.b-tr{position:absolute;top:0px;right:0px;width:5px;height:5px;	background:#ddd;}
/*Нижние левый и правый уголки*/
.b-bl{position:absolute;bottom:0px;left:0px;width:5px;height:5px;	background:#ddd;}
.b-br{position:absolute;bottom:0px;right:0px;width:5px;height:5px;	background:#ddd;}
</style>
<div class="b">
	<br><br>
	<div class="b-tl"></div>
	<div class="b-t"></div>
	<div class="b-tr"></div>
	<div class="b-l"></div>
	<div class="b-r"></div>
	<div class="b-bl"></div>
	<div class="b-b"></div>
	<div class="b-br"></div>
</div>

переделать под себя думаю сумеешь

для экономии места и трафика можно сделать js скрипт, который будет вставлять в .b дополнительные блоки с бордером

Heartbeat · February 21, 2012

Switch74,

Спасибо, интересный ход

Sign In

textbox и круглые углы

Question

Heartbeat

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

Heartbeat

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information