반응형
CSS를 사용하여 웹 양식의 특정 컨트롤 주위에 그룹 상자 만들기
웹 양식에 세 개의 드롭 다운 목록으로 구성된 세 가지 컨트롤이 있습니다.
이러한 컨트롤 주위에 그래픽 "상자"를 만들고 싶습니다. 그 이유는 이러한 컨트롤을 선택하는 것이 내 프로세스의 "STEP 1"이되기 때문입니다. 그래서 저는이 컨트롤 주위에 상자를 놓고 "Step 1"이라고 부르고 싶습니다.
CSS로이 작업을 수행하려면 어떻게해야합니까?
예:
fieldsetA의이 legend형태를 제어하기위한 시각 및 의미 그룹을 제공한다. 그런 다음 CSS를 사용하여 원하는대로 스타일을 지정할 수 있습니다. A fieldset는 legend부모의 경계를 시각적으로 방해 할 수 있다는 점에서 다소 독특합니다 fieldset(다른 요소에서는 가능하지만 어렵습니다).
예 : http://jsfiddle.net/NUMcr/1/
<fieldset>
<legend>Group 1</legend>
<input type="text" />
<asp:Textbox runat="Server" id="txt1" />
<!-- etc -->
</fieldset>
fieldset {
margin: 8px;
border: 1px solid silver;
padding: 8px;
border-radius: 4px;
}
legend {
padding: 2px;
}
이 fieldset이 특정 목적을 위해 만들어 HTML 요소, http://www.w3.org/wiki/HTML/Elements/fieldset는 . CSS 만 사용하도록 설정 한 경우 다음과 같이 할 수 있습니다.
<html>
<head></head>
<body>
<h1>Step 1</h1>
<div style="border: 1px solid #000000;">
<input type="text" />
<input type="submit" value="Submit" />
</div>
</body>
</html>
그런 다음 h1(또는 헤더에 사용하려는 HTML 요소 유형) 및 div입력 요소를 포함하는 스타일을 지정할 수 있습니다 .
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
반응형
'program story' 카테고리의 다른 글
| MySQL : 저장 프로 시저 내의 트랜잭션 (0) | 2020.11.28 |
|---|---|
| 키가 존재하지 않는 맵의 값을 읽으면 어떻게됩니까? (0) | 2020.11.28 |
| Android : 인 텐트를 통해 특정 폴더를 열고 파일 브라우저에 해당 콘텐츠를 표시하는 방법은 무엇입니까? (0) | 2020.11.28 |
| Amazon RDS Oracle 인스턴스에 연결할 때 "읽기 호출에서 빼기 1"오류에 접근하는 방법 (0) | 2020.11.28 |
| gateway.sandbox.push.apple.com에 연결할 때 "verify error : num = 20" (0) | 2020.11.28 |