如何仅删除字段集边界，而不删除字段集内元素的边界？

Question

Example below

I have a form with a fieldset and a button. Both button and fieldset have borders around them. I want the border gone only for the fieldset. How?

(The CSS in my example removes both borders - for fieldset and for button when I want button to remain untoched)

 #select_spec_form #submit_button { border: 0; } 

 <form id="select_spec_form"> <fieldset id="submit_button"> <input name="submit[submit]" id="submit_button" value="View" type="submit"> </fieldset> </form> 

Answer 1

Simply change the selector to only select the fieldset #select_spec_form fieldset . Also don't use same ID with two different elements.

 /* Remove the ID from selector if you want to select all the fieldset in the same page and container */ #select_spec_form fieldset#another_ID { border: 0; } 

 <form id="select_spec_form"> <fieldset id="another_ID"> <input name="submit[submit]" id="submit_button" value="View" type="submit"> </fieldset> </form> 

Answer 2

First things first: you cannot use the same id for multiple elements. if you need to do this for css use the class attribute instead.

When it comes to the CSS you must refer to each object separately even though they both share the parent #select_spec_form.

 #select_spec_form fieldset{ border:1px solid red; } #select_spec_form input{ border:1px solid black; } 

 <form id="select_spec_form"> <fieldset> <input name="submit[submit]" id="submit_button" value="View" type="submit"> </fieldset> </form>