HTML表单边框无法正常显示问题求教

解决方法 #

你需要使用HTML原生的表单分组标签<fieldset>来实现分组边框效果，该标签是浏览器默认自带边框样式的表单专用元素，确实不需要额外编写CSS即可实现你要的效果，配合<legend>标签还可以直接在边框上展示分组的标题。

你可以将原来包裹尺寸、饼底、配料的普通<div>替换成<fieldset>，把每个分组的标题放在<legend>标签里即可，修改后的代码示例如下：

完整HTML代码 #

<form>
    <h1>Pizza Order Form</h1>
    <label>Pizza Type:</label>
    <select name="type" id="type">
        <option>Aloha Chicken</option>
        <option>Beef Pepperoni</option>
        <option>Chicken Delight</option>
        <option>Deluxe Cheese</option>
    </select>

    <label>Quantity:</label>
    <input type="number" min="1" max="4" value="1" /> <br /><br />

    <fieldset>
        <legend>Size</legend>
        <input type="radio" id="small" />
        <label for="small">Small</label>
        <input type="radio" id="medium" />
        <label for="medium">Medium</label>
        <input type="radio" id="large" />
        <label for="large">Large</label>
    </fieldset>
    <br />

    <fieldset>
        <legend>Crust</legend>
        <input type="radio" id="thin" />
        <label for="thin">Thin</label>
        <input type="radio" id="thick" />
        <label for="thick">Thick</label>
        <input type="radio" id="deep dish" />
        <label for="deep dish">Deep Dish</label>
    </fieldset>

    <br />
    <fieldset>
        <legend>Toppings</legend>
        <input type="checkbox" id="Mushroom" />
        <label for="Mushroom">Mushroom</label>
        <input type="checkbox" id="Sausage" />
        <label for="Sausage">Sausage</label>
        <input type="checkbox" id="Olives" />
        <label for="Olives">Olives</label>
    </fieldset>

    <br />
    <label>Addons:</label>
    <select>
        <option>Please select addons if required</option>
        <option>Side of Buffalo Wings</option>
        <option>Garlic Bread</option>
    </select>

</form>

你原来的CSS代码不需要做任何修改，替换后即可看到每个分组都被默认边框包裹，符合你预期的效果。

内容的提问来源于stack exchange，提问作者Aceless