HTML code:
<div class="form-item-input">
<button class="file-btn">
<span class="form-item-icon material-symbols-rounded">Upload</span>
<input id="file" type="file" accept="image/*" required>
<label for="file" class="upload-text">Upload</label>
</button>
</div>
With CSS it looks like this: click
How can i make the whole button clickable and activate a file input? Also need to make it that way that it would apply styles the is being used on button (for e.g. now on button applied cursor: pointer that didn't apply for that little input type="file")
Thanks!
I've some radiobuttons: Good, Better and Best.
I want to change its appearance to a rectangle button.
Like this:
Codepen:
https://codepen.io/ogonzales/pen/dyvvjgx
Code:
<div class="fps-budget" data-fps-budget="good">
<input id="fps_good" type="radio" name="budget" value="good" class="visually-hidden">
<label for="fps_good">
<img data-fps-budget-img="" src="//cdn.shopify.com/s/files/1/0408/5792/7834/files/Good_29ea1531-4b74-4ead-be87-8f053f8efc96_320x140.jpg?v=1601266077" alt="Good.">
<span class="h3">Good.</span>
</label>
</div>
CSS you can put this.
input[type=“radio”] {
display: “none”
}
Then you can change the style of the label.
Help me please with styling radio button which comes right after label:
<div>
<label for="radio">mylabel</label>
<input type="radio" class="myclass">
</div>
There is no way to put <label> after <input=radio>, or radio inside label. Need styling radio button only in priority label first.
I am attempting to utilize the bootstrap "form-control" class on a checkbox within a label tag so that clicking the text also checks the textbox.
Here is the JSFiddle: https://jsfiddle.net/vpm13m2b/
The HTML for the control is:
<div class="form-group">
<div>
Attempt #1
<span class="red">*</span>
</div>
<label>
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
<div class="form-group">
<div>
Attempt #2
<span class="red">*</span>
</div>
<label class="checkbox-inline">
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
With attempt 1, the "Yes" text is pushed to a separate line. With attempt 2, the checkbox and underlying controls are pulled the width of the page, which also pushes the "Yes" text to the second line. The screenshot of this is below:
Here's what I am trying to do:
The styled checkbox is displayed next to the "Yes"
Selecting the text also selects the checkbox
Keep the solution clean (trying to avoid dealing with float:left or jquery click events on the text to check the checkbox)
It just seems that there has to be a vanilla way to do this. All the bootstrap docs just show standard checkboxes - nothing with the form-control class styling the checkbox for their nice inline examples.
Remove the class="form-control" from your checkboxes. As the bootstrap docs state:
All textual <input>, <textarea>, and <select> elements with
.form-control are set to width: 100%; by default.
jsFiddle example
The .form-control class has about a dozen properties being set that you most likely don't want or need.
Here's what I came up with to fix my issue. I need to retain the .form-control class on the checkbox element so that the checkbox control is styled by the bootstrap theme. My busines requirement is to use the themed, not default browser, checkbox.
See working JSFiddle here: https://jsfiddle.net/vpm13m2b/3/
input[type=checkbox].form-control {
width: 25px;
height: 25px;
display: inline-block;
vertical-align: -8px;
}
The css above was added into my site's stylesheet so that the form-control checkboxes retain the style, and I don't have to change the existing code that has a label containing the checkbox and caption to the right of the checkbox vertically centered.
This works with my original attempt (#1) on the html below:
<div class="form-group">
<div>
Attempt #1
<span class="red">*</span>
</div>
<label>
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
The resulting output matches what I'm looking for in the original question:
why can't one set a style like the font size in an input tag, e.g.
<input style="font-size:20px" type="radio" name="a" value="a">some text</input>
Shouldn't the font attributes apply?
Secondly, what is the best way to do this then?
Thanks
I think that it's because the CSS you're setting applies to the 'inner' tag of that input.
The thing you want styled is its Value, so you need to wrap your input inside a placeholder and style that.
For example:
<span style="font-size:40px">
<input type="radio" name="a" value="a">some text
<input type="radio" name="a" value="b">some text
</span>
Works as expected.
There's not a lot you can do to style a radio button, however:
<input type="radio" name="radiogroup" id="radio-1">
<label for="radio-1">Radio button 1</label>
you can style the label...
The best way to go about this is providing the style deceleration within an external stylesheet, or perhaps at the top of the document. Inline styles are typically what you want to avoid if at all possible, as it becomes confusing for later changes and can cause really dirty specificity issues.
An example of a fix:
HTMl (example)
<div id="form">
<input type="text" name="name" value="a" />
</div>
CSS (example)
#form input {
font-size: 20px;
}
Hope this helps.
Try the following:
<input type="radio" name="a" value="a"><span style="font-size: 50px;">some text</span></input>
If you wrap the text with a span\p tag you will be able to style the inner text of that tag.
I know this question already has an accepted answer, but I figure it's worth mentioning this:
It may be better to either associate a <label> tag with each radio input (using the for attribute of the label) or wrapping each radio input with a label tag. This lets your user click on the text to select the radio input instead of having to aim for a rather small circle.
So your markup looks like so:
<input type="radio" id="radio1" name="radios" value="something 1" />
<label for="radio1">Something 1</label>
<input type="radio" id="radio2" name="radios" value="something 2" />
<label for="radio2">Something 2</label>
<input type="radio" id="radio3" name="radios" value="something 3" />
<label for="radio3">Something 3</label>
Radio inputs are grouped into mutually exclusive selections by their name, which the group will share. The value specified in the for attribute of the label will match the id attribute of the radio input you want selected. So in the sample above, if you click on the text "Something 1", the radio input that is id'd as radio1 gets selected.
You can then style the text of the label to your heart's content.
This is in regards to the second part of your question,
"Secondly, what is the best way to do this then?"
#input {
background-color: black;
color: green;
text-align: center;
}
<input id="input" value="Value" />