Im using bootstrap, like that:
<label>
<input type="text">
</label>
the problem is, label is hardcoded with display: inline-block; How to get rid of it, or make it nicer?
override it with your own stylesheet with display:block
You can try it with <label style="display: block;"></label>
If you have bootstrap. Just use the class "form-control" for the textbox. And I suggest you, don't use the 'label' for parent of textbox.
<input type="text" class="form-control">
use this code for 100% width of textbox
It's frowned upon these days, but I believe styling the label inline should override it.
<label style="display:block;">
<input type="text">
</label>
Show solve your query
Related
I'm having trouble figuring out how to add custom CSS to add spacing between a checkbox and text ( Ship to a different address?). Anytime I add margin or padding the whole element (checkbox + text) is moved. See picture attached?
Thanks for your help!
https://roynattivmd.com/checkout/
Checkbox and text:
You could add some spacing by adding margin-right: [value]; to the specific input. Since you are using elementor, you might do this via inline-styles.
<label for="myInput">
<input id="myInput" type="checkbox" style="margin-right: .5rem;">
Ship to a different address?
</label>
Or via an external stylesheet:
#myInput {
margin-right: .5rem;
}
<label for="myInput">
<input id="myInput" type="checkbox">
Ship to a different address?
</label>
Please try this code,To Spacing between checkbox and text?
dd label input {
margin-right:10px;
}
<dd id="rr-element">
<label for="rr-1">
<input type="checkbox" value="1" id="rr-1" name="rr[]">
Value 1
</label>
</dd>
I hope this code will be useful.
Thank you.
Is it possible somehow to make checkbox and text inline? Having trouble with this one, tried inline options through css, but seems I either can't use it or It is doesn't work.
Here is a simple example. All you need is a wrapper element and one line of CSS. By default, all immediate flex children will share the available horizontal space on the line.
.checkboxRow {
display: flex;
}
<div class="checkboxRow">
<input id="mycheckbox" type="checkbox">
<label for="mycheckbox">I am a label</label>
</div>
<div class="checkboxRow">
<input id="mycheckbox2" type="checkbox">
<label for="mycheckbox2">I am a label</label>
</div>
<div class="pane">
<div style="background-color: #f00">
<input type="radio" name="select" id="radio1" checked />
<label for="radio1">Radio 1</label>
</div>
<div>
<input type="radio" name="select" id="radio2" />
<label for="radio2">Radio 2</label>
</div>
</div>
I want to make an event: if an input[type=radio] is clicked, change css background-color of the parent (<div>). How can I do that?
Something like:
input[type="radio"]:checked < div {
background-color: #f00
}
Is there a way to do that without setting an id for per <div>?
p/s: I also don't want to use javascript or jquery to do that.
There's no parent selector in css, so you can't. You can try styling the input or the label.
You could try a sibling selector and absolutely position a sibling element behind your input.
EDIT: example with sibling element .inputbg:
https://jsfiddle.net/pfv77ghe/
unfortunately this cannot be achieved with current CSS features (hopefully this will be taken care of in the future versions). Right Now this can be done only using Javascript or Jquery.
CSS supports only child selector from a parent and not a parent selector from child.
HTML
I think this would work for you.
<input type="click" checked>
CSS
input[type= click]:checked+div{
background-color: #f00;
}
I have a form with a textbox for email input and a button. The button is technically a HTML button here. The Form's HTML is like this:
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<button type="submit">
Submit
</button>
</form>
JSFiddle Code: http://jsfiddle.net/ahmadka/aDhUL/
I'd like to convert the button type="submit" control to an input type="submit", while also keeping all the current CSS, so that visually there's no change. CSS would need to be updated I guess. I tried to do this myself, but I couldn't update the CSS correctly.
Can someone help me with this please ?
The basic solution requires changing the following everywhere in your CSS
button -> input[type=button]
input -> input[type=text]
I'd prefer to add a CSS class, instead of referencing the tag names, you could just use
<input type="text" class="text" />
<input type="submit" class="btn" />
That would require changing the following everywhere in your CSS
button -> input.btn
input -> input.text
This is not fully finished but almost works http://jsfiddle.net/aDhUL/7/
The problem is that the input:before directive inserts an element inside of the input. That is allowed for button, but not allowed for input , since input can't have child elements. http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/
So (if you want to use :before) you have to go back to a button, inserting a span element between the text field and the button won't allow you to have a hover effect on both the arrow and the button.
Why do you want to use input type="submit" in the first place?
You just need to change button to input[type=submit] in your stylesheets. If that doesn't work, then you'll need to be more specific about what problems you're having.
You will have to edit CSS, don't be lazy mate :)
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<input type="submit" class="btn" value="submit">
</form>
CSS
.btn{
color:green;
}
Now you can also use after adding the class in CSS
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<button type="submit" class="btn">Button</button>
</form>
All of the style sheets have to be updated to do so:
What is now this:
/* Form submit button */
.form-wrapper button {
Needs to become this:
/* Form submit button */
.form-wrapper input[type=submit] {
there are a bunch more classes to be updated below that one..
EDIT: changed it from a class to the style as joe points out.
Please check my code at http://jsfiddle.net/TccN5/.
It has a gap between the input text box and the button on the right. For the very same markup on Bootstrap site the input box and the button has a nice tight fit with no gap.
Why do I have the gap?
You have extra whitespace characters between button and input elements. Place button tag immediately after input element:
<input type="text" /><button class="btn" type="button">Any</button>
DEMO1
Or alternatively, apply this css styles:
.input-append{
font-size:0;
}
DEMO2
Im not sure why that is, but this is how i fixed it. maybe you got some of your own css conflicting with the text field.
here's the jsfiddle with the fix http://jsfiddle.net/TccN5/2/
I just added
style="margin-right:-4px"
to your
<input type="text">
Use input-prepend and input-append
<div class="btn-group input-prepend input-append">
<input type="button" class="btn" value="Prev">
<input type="text" value="">
<input type="button" class="btn" value="Next">
<div>