CSS를 사용하여 웹 양식의 특정 컨트롤 주위에 그룹 상자 만들기

웹 양식에 세 개의 드롭 다운 목록 세 개의 컨트롤이 있습니다.CSS를 사용하여 웹 양식의 특정 컨트롤 주위에 그룹 상자 만들기

이 컨트롤 주위에 그래픽 "상자"를 만들고 싶습니다. 그 이유는 이러한 컨트롤을 선택하는 것이 내 프로세스의 "STEP 1"이되기 때문입니다. 따라서이 컨트롤 주위에 상자를두고 "1 단계"라고 말하고 싶습니다.

CSS로이 작업을 수행하려면 어떻게해야합니까?

예 : 한 legend와

2012-09-24 Testifier

fieldset 폼 컨트롤 가시 시맨틱 그룹을 제공한다. CSS로 스타일을 지정할 수 있습니다. 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;  
}

출처

2012-09-24 19:59:05

hmmmmmmm, fieldset 태그를 추가했지만 컨트롤이 상자에 표시되지 않습니다. 이 컨트롤에는 CSS 클래스가 붙어 있으며 위치 지정은 모두 설정되어 있습니다. 이게 문제가 될 수 있니? – Testifier

그럴 수도 있습니다. Fieldset은 단지 컨테이너 일 뿐이므로 수정 가능한 문제 여야합니다. fieldset에'position : relative'를 설정하거나 컨트롤의 CSS를 일시적으로 제거하고 표시되는지 확인하십시오. –

이 prob였습니다. 고마워! – Testifier

이 특정 목적을 위해 만들어지는 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가 포함 된 스타일을 수 입력 요소

출처

2012-09-24 20:01:43 Gromer

<form> 
    <fieldset> 
    <legend>Personalia:</legend> 
    Name: <input type="text"><br> 
    Email: <input type="text"><br> 
    Date of birth: <input type="text"> 
    </fieldset> 
</form>

출처

2015-09-18 06:36:31

답변에 약간의 설명 추가 – HaveNoDisplayName

CSS를 사용하여 웹 양식의 특정 컨트롤 주위에 그룹 상자 만들기

답변

관련 문제