Hello I have a wp site with contact forms 7 plugin..
I have set up the form with some checkboxes that have images for the content.. here is the html
Here is a jsfiddle
I am trying to make a border around the image when a checkbox is selected...
<div role="form" class="wpcf7" id="wpcf7-f299-p295-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/apply-for-trial/#wpcf7-f299-p295-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div class="trials-option">
<label>
<span class="wpcf7-form-control-wrap trials-list">
<span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required"><span class="wpcf7-list-item first last">
<input type="checkbox" name="trials-list[]" value="trial 1">
<span class="wpcf7-list-item-label">trial 1</span>
</span>
</span>
</span>
<img src="http://clinics.dsgthemes.com/wp-content/uploads/2016/01/trial-16.png">
<br>
</label>
</div>
</form>
</div>
again, trying to make the img inside label have a border when selected..
I have added a class that makes the checkbox bigger, just for me to verify I am selecting the check box.. the problem is that I am not selecting the img, and I cannot figure out a way to do it.
#wpcf7-f299-p295-o1 > form > div > label > input[type="checkbox"]:checked {
height: 25px;
width: 25px;
}
#wpcf7-f299-p295-o1 > form > div > label > input[type="checkbox"]:checked ~ img {
border: 3px solid #888;
}
tried this way: (but it isn't immediately after the check box..)
#wpcf7-f299-p295-o1 > form > div > label > input[type="checkbox"]:checked + img {
border: 3px solid #888;
}
and many others.. I can't seem to get it, any help?
You can restructure the DOM like so:
HTML
<form action="/apply-for-trial/#wpcf7-f299-p295-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div class="trials-option">
<label>
<span class="wpcf7-form-control-wrap trials-list">
<span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required">
<span class="wpcf7-list-item first last">
<span class="wpcf7-list-item-label">trial 1</span>
<input type="checkbox" name="trials-list[]" value="trial 1"> <img src="http://clinics.dsgthemes.com/wp-content/uploads/2016/01/trial-16.png">
</span>
</span>
</span>
</label>
</div>
</form>
And then use this selector in your CSS
CSS
.trials-option input[type="checkbox"]:checked + img {
border: 3px solid #888;
}
Demo
https://jsfiddle.net/5L6waw1d/2/
Related
I made a label because I wanted to apply css to the checkbox.
However, the label is not working except for the checkbox whose id is 'checkall'.
<div class="divCenter cartDiv">
<ul>
<li class="selectallforcart">
<div class="hanadiv">
<input type="checkbox" id="checkall" class="check" value="0"/>
<label for="checkall"></label> selelct All
</div>
</li>
</ul>
<% ArrayList<LikePdVO> likeList = (ArrayList<LikePdVO>)(request.getAttribute("likeList"));
for(LikePdVO vo : likeList) {
String arr[] = vo.getPhoto().split("\\*");
%>
<div class="cartProduct" id="<%=vo.getPd_id()%>">
<div class="fl cartCheck">
<input type="checkbox" class="check" name="<%=vo.getName()%>"
value="<%=vo.getOrder_price()%>" id="<%=vo.getPd_id()%>">
<label for="<%=vo.getPd_id()%>">
</label>
</div>
this is my code.
.cartDiv input[type=checkbox] + label {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #bcbcbc;
cursor: pointer;
}
.cartDiv input[type=checkbox]:checked + label {
background-color: #866744;
}
.cartDiv input[type=checkbox] {
display: none;
}
And this is CSS.
When you mean that the label is not working, I assume you mean that clicking on it doesn't cause the checkbox to be checked?
Either way, the label's text needs to be within the element, so it should be:
<label for="checkall">Select all</label>
And your other labels contain no text, so the label itself is probably quite small, despite the CSS, and therefore not clickable.
You need to set label text in the label tag not out side of it.
<div class="divCenter cartDiv">
<ul>
<li class="selectallforcart">
<div class="hanadiv">
<input type="checkbox" id="checkall" class="check" value="0" />
<label for="checkall">selelct All</label>
</div>
</li>
</ul>
</div>
I have a form with long labels over each input and I want the input centered underneath each label but I also need the inputs to stay inline. It should look like this below but the inputs should be centered under each long label.
Here is what I have but I am having trouble making the inputs center under the labels.
.question-container {
width: 1000px;
margin: 0 auto;
}
#questions {
margin: 5px 30px;
display: inline-block
}
<div class="form-inline">
<span id="questions">
<label>How much will your house cost?</label>
<input class="form-control" type="text" placeholder="input">
</span>
<span id="questions">
<label>What is the most you can pay monthly?</label>
<input class="form-control" type="text" placeholder="input">
</span>
<span id="questions">
<label>What is your Current Monthly Rent?</label>
<input class="form-control" type="text" placeholder="input">
</span>
</div>
<div id='centered'>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
Any help would be greatly appreciated!
Got it!
Simply had to add text-align:center; to the span
#questions {
margin:5px 30px;
display:inline-block;
text-align:center;
}
In my project, I have a dialog div with four labels, four text input, one submit button and one shutdow button.
I want it appears like this:
AAAAAAAA:input text
BBBBBBBB:input text
CCCCCCCC:input text
DDDDDDDD:input text
submit shutdown
But acturally, it does not appear format, it likes this:
AAAAAAAA:input text
BBBBBBBB:
input text
CCCCCCCC:input text
DDDDDDDD:
submit input text
shutdown
It is ugly, I don't want it like that.
Here is my css and html code:
<style>
.addDiv{width:25%;height:20%;position:absolute;top:35%;left:35%;border:2px solid #ffffff;color:white;display:none;border-radius:15px;background:rgba(0,0,0,0.7);}
.firDiv{height:80%;width:100%}
.firDiv label{float:left;margin-left:10%;margin-top:2%;width:20%}
.firDiv input{float:right;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%}
.secDiv{height:20%;text-align:center;width:100%;margin-top:5%}
</style>
<div id="addCnt" class="addDiv">
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<label>AAAAAAA:</label><input type="text" name="prdSty"><br />
<label>BBBBBBB:</label><input type="text" name="diffLvl"><br />
<label>CCCCCCC:</label><input type="text" name="repTm"><br />
<label>DDDDDDD:</label><input type="text" name="fixTm"><br />
</div>
<div class="secDiv">
<input type="submit" value="add" /><input id="sdnBt" type="button" value="shutdown" >
</div>
</form>
</div>
Who can help me?
may be something like this?
* {
box-sizing: border-box;
}
.firDiv label {
padding: 5px;
text-align: right;
float: left;
width: 17%;
}
.firDiv .control {
float: left;
width: 83%;
}
.form-group {
clear: both
}
.secDiv {
margin-left: 16%;
padding-top:10px;
}
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<div class='form-group'>
<label>AAAAAAA:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>BBBBBBB:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>CCCCCCCC:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>DDDDDDDDD:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
</div>
<div class="secDiv">
<input type="submit" value="add" />
<input id="sdnBt" type="button" value="shutdown">
</div>
</form>
Two things you need to do here. First you have to clear the floats after the first Div completed. Second is apply float left to your input fields.
.firDiv input{float:left;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%;}
.secDiv{height:20%;text-align:center;width:100%;margin-top:10%; clear:both;}
I have applied clear:both in secDiv and float:left in firDiv.
DEMO
add this to your css fiddle
.secDiv input {
width: 50%;
}
Rather try adding each input and label to their own div, something like this:
https://jsfiddle.net/ba0cL61b/5/
What this does is adds a div .row inside your firDiv div and inside the .row adds a div for your label and one for your input. So it would look like this:
<div class="row">
<div class="label">
<label>AAAAAAA:</label>
</div>
<div class="input">
<input type="text" name="prdSty">
</div>
</div>
This is a bit easier to understand and style.
I have the following HTML code:
<div>
<p><label>Faculty <input type="text" class = "f"></label></p>
<p><label >Department<input type="text" class = "f"></label></p>
</div>
How can I make textboxes appear one under another without shifting?
You could do it with inline-block, additional <span> tags added.
div > p > label > span {
display: inline-block;
width: 90px;
}
<div>
<p>
<label>
<span>Faculty</span>
<input type="text" class="f" />
</label>
</p>
<p>
<label>
<span>Department</span>
<input type="text" class="f" />
</label>
</p>
</div>
Or, the css table way.
div > p > label {
display: table;
table-layout: fixed;
}
div > p > label > span {
display: table-cell;
}
div > p > label > span:first-child {
width: 90px;
}
<div>
<p>
<label>
<span>Faculty</span>
<span><input type="text" class="f" /></span>
</label>
</p>
<p>
<label>
<span>Department</span>
<span><input type="text" class="f" /></span>
</label>
</p>
</div>
give a left margin to your input field for faculty
Is there anyway bootstrap way/style to add non-editable prefix into the inputbox? such as the dollar sign. the prefix has to be included inside the input box.
currently I'm doing something like this, but the sign is out of the inputbox.
<div class="input-group input-medium ">
<input type="text" class="form-control input-lg" readonly="">
<span class="input-group-btn">
$
</span>
</div>
Twitter Bootstrap Version 3 has a class named input-group-addon for this feature.
You probably want this
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="price">
</div>
Js Fiddle Demo - Basic
Update: To remove the background from the $ sign- You just need to overwrite the input-group-addon class
.input-group-addon
{
background-color:#FFF;
}
Js Fiddle Demo - Without Background
If you want to remove the border from right side of $ sign, You can add this css as well
.input-group .input-group-addon + .form-control
{
border-left:none;
}
Js Fiddle Demo - Without Border
HTML:
<div class="col-xs-6" >
<div class="left-inner-addon">
<span>$</span>
<input type="text" class="form-control" placeholder="Amount" />
</div>
</div>
<div class="col-xs-6" >
<div class="right-inner-addon">
<span>$</span>
<input type="search" class="form-control" placeholder="Amount" />
</div>
</div>
CSS:
.left-inner-addon {
position: relative;
}
.left-inner-addon input {
padding-left: 22px;
}
.left-inner-addon span {
position: absolute;
padding: 7px 12px;
pointer-events: none;
}
.right-inner-addon {
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon span {
position: absolute;
right: 0px;
padding: 7px 12px;
pointer-events: none;
}
jsFiddle
Bootstrap Versions 4 and 5
This functionality changed significantly between versions 3 and 4. The class input-group-addon has been removed in favor of using input-group-text inside of either input-group-prepend or input-group-append.
To prepend text
<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" placeholder="0.00" />
</div>
To append text
<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="email" />
<div class="input-group-append">
<span class="input-group-text">#gmail.com</span>
</div>
</div>
To change the background color of the added text
.input-group-text
{
background-color:#FFF;
}
You can to this by setting the input-group a position:relative and absolute positioning the input and the span with higher(than input's z-index) z-index number for span. Also you need to add to the input a padding-left value equal to span's width