I am trying to hide the Input button to make it a custom button, but input is not hiding →
<li>
<div class="caption">Attach File</div>
<div class="detail">
<input type="file" id="o-file" hidden="hidden" />
<button id="mockinput"></button>
</div>
Does this doesn’t work on the input tag?
hidden="hidden"
The CSS rule: input {display: inline-block} is overriding the hidden attribute.
One possibility is to override that via the ID.
#o-file { display: none; }
Hi there, and Thanks for the help. I have not been in touch with CSS for some time so could not debug it on my own and got panic. I have eliminated that rule →
But in general, if inline-block is applied to the parent element, li, for example; that means all its child elements(div in this case) will be inline, Right?
<li>
<div class="caption">Resume/CV</div>
<div class="detail"><input name="" type="text"></div>
</li>
Removing the rule where you did, will remove it for all input elements, which is probably not what you want, assuming you put that rule in for a reason.
That is why I attached the override rule in my example to the element’s ID.
Not all rules in CSS are inherited by child elements, as confusing as that may be. Display is one such property.
For example, a div may typically have display set to block, but its content may commonly be inline elements, like span. The spans don’t display as block because the parent is a block.
In your example, the divs will still be blocks (on new lines) within inline-blocks.
Also, the semantics are wrong. The inputs should belong to a form, so don’t need to be a list to belong together, or be in a fieldset to be a distinct sub-group within a form. The use of a div as an input caption is wrong, the label element is dedicated to this role.
There is likely no need for the div wrapping the input, if it is only there to hang the class on, consider putting the class directly onto the input.
I have created this with the fieldset here, but an issue:
<label for=""></label>
<input type="text">
<label for=""></label>
<input type="text">
<label for=""></label>
<input type="text">
<label for=""></label>
<input type="text">
<label for=""></label>
<input type="text">
this is one team →
<label for=""></label>
<input type="text">
How can we ensure that they come inline and the next pair comes in another row +
finishing like this one →
HTML:
<div class="wrapper">
<header>
<h5>Human Resource</h5>
</header>
<main>
<form action="">
<fieldset>
<label for="resume">RESUME/CV</label>
<input name="" type="file" hidden="hidden">
<button id="mockinput">
<span>ATTACH RESUME/CV</span>
</button>
<label for="fname">Full Name</label>
<input name="" type="text">
<label for="email">Email</label>
<input name="" type="text">
</fieldset>
<fieldset class="txtar-wrapper">
<label for="textarea1">Why do you want to join Mars Government?</label>
<textarea name="textarea1" id="textarea1" cols="30" rows="10">
My side-view mirror reflects a steady stream of light, until it is cut off. Someone is standing outside my car door. He is wearing a widely striped, bright turquoise and gray sweatshirt. I assume he wants directions, but I am alone, and it is nighttime. As I am about to shoo him away, I look up into his face. It is then I see a menacing look about him, and as I glance away I notice something other than the brightly colored sweatshirt.
</textarea>
</fieldset>
</form>
</main>
</div>
CSS:
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
body{
font-family: 'Lato', sans-serif;
font-size: 1.1rem;
}
.wrapper{
margin: 0 auto;
max-width: 1200px;
}
header, main {
margin: auto;
padding:20px;
max-width: 700px;
}
main {
background-color: #f9f9f;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lato', sans-serif;
margin: 0;
font-weight: normal;
color: #333333;
}
h1{
font-size: 90px;
}
h2 {
font-size: 70px;
}
h3 {
font-size: 60px;
font-weight: normal;
}
h4 {
font-size: 50px;
margin: auto;
}
h5 {
font-size: 40px;
}
h6 {
font-size: 25px;
}
p {
font-size: 18px;
font-family: 'Lato', sans-serif;
line-height: 1.475em;
}
a {
font-family: 'Lato', sans-serif;
}
form, textarea {
color: #909090;
}
fieldset > * {
display:inline-block;
}
input {
width: 450px;
padding: .7em .7em;
/*display: inline-block;*/
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 2px #ddd;
box-shadow: inset 0 1px 2px #ddd;
vertical-align: middle;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
/*border: 1px solid red; */
}
.txtar-wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin-top: 30px;
}
textarea {
/*resize: vertical;*/
margin-top: 20px;
padding: 10px;
font-family: 'Lato', sans-serif;
font-size: 1.1rem;
border: 0.5px solid #DAD6D6;
}
textarea > * {
margin-bottom: 30px;
}
<form>
<fieldset>
<fieldset class="fset-in">
<label for="fname">Full Name</label>
<input name="fname" id="fname" type="text">
</fieldset>
<fieldset class="fset-in">
<label for="email">Email</label>
<input name="email" id="email" type="text">
</fieldset>
</fieldset>
</form>
I was able to achieve the objective here.
This is the validator.w3.org link, which doesn’t seem to be giving any error.
In terms of error there are no errors on that site, but those who have experience can they please confirm if child fieldset under parent filedset is/are ok to use?
CSS →
.fset-in {
display: flex;
justify-content: flex-start;
}
.fset-in label {
flex:1;
}
.fset-in input{
flex:3;
}
.fset-in button{
flex:3;
}
fieldset {
/*border:none;*/
}
#mockinput {
padding: 10px 10px;
background-color: #E2E2E2;
width: 225px;
height: 40px;
max-width: 200px;
/* line-height: 40px; */
border: none;
font-size: 1rem;
border-radius: 3px;
outline: none;
color: #515357;
font: normal 400 16px/1.8 Lato;
border: 1px solid red;
}
#mockinput span {
font-weight: bold;
}
.hidden {
display: none;
}
Yes they are ok to use but I don’t think your use of them is very semantic as all the items are linked to ‘human resource’ so the outer fieldset would be ok. The nested fieldsets could just be divs (or if you used css grid you could probably do away with the divs and just have the form elements themselves except that you seem to want extra borders everywhere so will probably still need the extra divs).
The ‘Human Resource’ text should be the legend for the fieldset rather than an h2 above it.
The validator will show you technical errors in the code structure, but it takes no account for the semantics.
Semantics are related to the context of the content within the elements, so it difficult for a machine to analyse. The validator is I think mostly content agnostic, and looks at what tags are placed in what order and structure.
Regarding your use of fieldset, in the last example, you have only one input (or field) per set.
One field, does not a set make. 
Much like a single 13mm spanner does not constitute a tool-set, it is just a singular tool.
The fieldset element is not a required element for a form, so use it only when you need it (to create sub-groups of related inputs within a form). I only mentioned it previously, because you appeared to be using lists to group inputs into a set.
If you only need to extra element to add styling, such as the border, if there is no semantically appropriate element that fits there, use a semantically inert element like div or span as appropriate.
Yes, Right. I read this in the morning today →
The borders are just placeholders as they are default so I have not yet eliminated them by setting border property to none, but I do not need a border.
This was a very critical analysis. In one word so much was said. Thanks for your support.
Sir, Thank you so much.
You mean I can get rid of both parent and child fieldset?
Label + input = set
Additionally, Was not label an element(Child to fieldset and sibling to input) or HTML entity?
input = field;
label != field;
label + input = singular field; /* not a set */
A label is a caption for the input field, to show the purpose of the input, it is not a field itself.
An example where you might use fieldsets.
Imagine a payment page on an Ecommerce site.
Your Details
Firstname
Lastname
TelephoneBilling Address
Address Line 1
Address Line 2
City
County
Country
Zip/Post CodeShipping Address
Same as Billing Address
Address Line 1
Address Line 2
City
County
Country
Zip/Post CodeCard Details
Card Type
Card Number
Security Code
Expiry Date
In the example, bold is the <legend> for each <fieldset>, the other text are <label> elements for each <input> of the set.
Think of legend as the label for a set, and label is for an individual input.
Each set is a group of inputs (or fields) that belong together and are presented separately from the other inputs in other sets, dividing the form into distinct sections.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.