필드 집합 및 범례에 대한 사용자 지정 테두리

Question

죄송합니다. 이전에이 질문을 물어 본 경우 제 친구가 이러한 종류의 필드 집합을 자신의 웹 사이트에 요청했습니다. 이 링크 custom fieldset border

이 정상처럼 보이지만, 나는 왼쪽과 오른쪽에있는 그 작은 수직선을 얻을 어떻게 궁금에서

스크린 샷은 텍스트 "를 유지하기 위해 목표".

도움을 주시면 대단히 감사하겠습니다. 당신은이 두 가지 특정 수직 라인의 스타일을 위해 :before 및 :after 의사 요소를 사용할 수 있습니다

Answer 1

감사합니다 :

fieldset { 
 
    border:1px solid gray; 
 
} 
 
legend { 
 
    padding: 0.2em 0.5em; 
 
    color: gray; 
 
    font-size:90%; 
 
    text-align:center; 
 
    position: relative; 
 
} 
 
legend:before { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 8px; 
 
    border-left: 1px solid gray; 
 
    left: 0px; 
 
    top: 7px; 
 
} 
 
legend:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 8px; 
 
    border-right: 1px solid gray; 
 
    right: 0px; 
 
    top: 7px; 
 
}

<form> 
 
    <fieldset> 
 
    <legend>Subscription info</legend> 
 
    <label for="name">Username:</label> 
 
    <input type="text" name="name" id="name" /> 
 
    <br /> 
 
    <label for="mail">E-mail:</label> 
 
    <input type="text" name="mail" id="mail" /> 
 
    <br /> 
 
    <label for="address">Address:</label> 
 
    <input type="text" name="address" id="address" size="40" /> 
 
    </fieldset> 
 
</form>

Answer 2

여기 일부 개선이다.

fieldset { 
 
    border:1px solid gray; 
 
} 
 
legend { 
 
    position: relative; 
 
    left: 50%; 
 
    /* Move the legend to the center of the fieldset's top border */ 
 

 
    transform: translateX(-50%); 
 
    /* Fix the alignment to center perfectly */ 
 

 
    background-color: white; 
 
    /* Put whatever color you want */ 
 

 
    padding: 0.2em 0.5em; 
 
    color: gray; 
 
    font-size:90%; 
 
    text-align:center; 
 
    position: relative; 
 
} 
 
legend:before { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 8px; 
 
    border-left: 1px solid gray; 
 
    left: 0px; 
 
    top: 7px; 
 
} 
 
legend:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 8px; 
 
    border-right: 1px solid gray; 
 
    right: 0px; 
 
    top: 7px; 
 
} 
 
#line { 
 
    position: absolute; 
 
    top: 19px; /* Position the line */ 
 
    left: 12px; 
 
    border-top: 1px solid gray; 
 
    min-width: 20%; /* Fix this according to the white space to hide */ 
 
}

<form> 
 
    <fieldset> 
 
<!-- Add a div here to make up a line to hide 
 
     the space left by the legend --> 
 
    <div id="line"></div> 
 
    <legend>Subscription info</legend> 
 
    <label for="name">Username:</label> 
 
    <input type="text" name="name" id="name" /> 
 
    <br /> 
 
    <label for="mail">E-mail:</label> 
 
    <input type="text" name="mail" id="mail" /> 
 
    <br /> 
 
    <label for="address">Address:</label> 
 
    <input type="text" name="address" id="address" size="40" /> 
 
    </fieldset> 
 
</form>

는 희망이 도움이 ...