div input:not(:first-of-type){
display: block;
}
#left_side{
width: 40%
}
label{
width:15em;
display: inline-block;
vertical-align: top;
}
input{
width: 23em;
border-style:solid;
border:1px solid black;
}
.group div{
margin-bottom: -1px;
}
.group input {
margin-bottom: -1px;
box-shadow: none;
background-color: antiquewhite;
}
.get{
width:23em;
display: inline-block;
}
<div class="group">
<div>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" class="get">
</div>
<div>
<label for="last_name">First Name:</label>
<input type="text" id="last_name" class="get">
</div>
</div>
<!--Here is some code with grouped boxes:-->
<div>
<label for="address_1_ln_1">Address 1:</label>
<div class="get">
<input type="text" id="address_1_ln_1">
<input type="text" id="address_1_ln_2">
</div>
</div>
<div>
<label for="address_2_ln_1">Address 2:</label>
<div class="get">
<input type="text" id="address_1_ln_1">
<input type="text" id="address_2_ln_2">
</div>
</div>
<div>
<label for="city">City:</label>
<input type="text" id="city" class="get">
</div>
<div>
<label for="state">State:</label>
<input type="text" id="state" class="get">
</div>
<dive>
<label for="zip">Zip:</label>
<input type="text" id="zip" class="get">
</dive>
How do you make text input of forms overlap borders like border: collapse on a table? By default stacking them one on top of the other has them develop a 2px border between adjacent inputs. Ideally both the borders should merge.
You could do
input {
margin-bottom: -1px;
}
Related
Hi I am trying to change a radio button list to actual buttons and I was successful in doing so with the following code. However, I want them listed next to each other instead of underneath each other. Any ideas what am I doing wrong?
.donations .d_amt .ginput_container label {
display: inline-block;
width: auto;
min-width: fit-content;
white-space: nowrap;
padding: 10px !important;
border: solid 2px #ccc;
transition: all 0.3s;
}
.donations .d_amt input[type="radio"] {
display: none !important;
}
.donations .d_amt input[type="radio"]:checked+label {
border: solid 2px green !important;
}
.gform_wrapper .d_amt .gfield_radio li {
display: inline-block;
}
.gform_wrapper textarea.small {
min-height: 60px!important;
}
<fieldset id="field_13_13" class="gfield gfield--width-full d_amt gfield_price gfield_price_13_13 gfield_product_13_13 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" data-js-reload="field_13_13">
<legend class="gfield_label">Donation Amount<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span>
</legend>
<div class="ginput_container ginput_container_radio">
<div class="gfield_radio" id="input_13_13">
<div class="gchoice gchoice_13_13_0">
<input class="gfield-choice-input" name="input_13" type="radio" value="€ 10|10" id="choice_13_13_0" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_0" id="label_13_13_0">€ 10</label>
</div>
<div class="gchoice gchoice_13_13_1">
<input class="gfield-choice-input" name="input_13" type="radio" value="€ 25|25" id="choice_13_13_1" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_1" id="label_13_13_1">€ 25</label>
</div>
<div class="gchoice gchoice_13_13_2">
<input class="gfield-choice-input" name="input_13" type="radio" value="€ 50|50" id="choice_13_13_2" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_2" id="label_13_13_2">€ 50</label>
</div>
<div class="gchoice gchoice_13_13_3">
<input class="gfield-choice-input" name="input_13" type="radio" value="€ 100|100" id="choice_13_13_3" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_3" id="label_13_13_3">€ 100</label>
</div>
<div class="gchoice gchoice_13_13_4">
<input class="gfield-choice-input" name="input_13" type="radio" value="Other Amount|0" id="choice_13_13_4" onchange="gformToggleRadioOther( this )">
<label for="choice_13_13_4" id="label_13_13_4">Other Amount</label>
</div>
</div>
</div>
</fieldset>
I'm working on an online rubric program, and I've tried just about everything I know without any luck. What I am trying to do is make each column in the rubric the same width and dynamically resize the height. Since there are 5 columns for each row, each column should be aprox 20% width of the parent. The tricky part comes with the height of each item. Since there will be varying text lengths inside each item, every item in the row should resize to the height of the longest item from that row.
I'm using flex right now, and I've tried using flex: 1 1 0px and flex-grow: 1; inside the .tile without luck. I have also tried using CSS grid, where I am able to achieve the equal width, but then the height requirement gets all wonky.
For visual people, the end result should look like this.
Any advice is appreciated.
.print {display: none}
body {margin: 0}
#title {
max-width: 1880px;
text-align: center;
font-size: 35px}
#title select {
font-size: 35px;
appearance: none;
outline: none;
border: none;
-webkit-appearance: none;
background-color: transparent}
/* --------[RUBRIC]-------- */
#rubric {margin: 10px 25px 55px 25px;}
#rubric textarea {
width: 100%;
margin-bottom: 20px;
border: 1px solid black;
box-sizing: border-box;}
section {display: flex;}
.tile {
flex: 1 1 0px;
box-sizing: border-box;
padding: 5px 10px 20px 10px;
border-radius: 2px;
border: 1px solid black;
font-size: 0.90rem;
text-align: center}
#rubric input[type=radio] {display: none}
#rubric input:checked + label .tile {background-color: #B488E7}
<form action='rubric.int.php' method='post'>
<div id='title'>
Research & Inquiry
<select name='usid' onchange='enableButton()' required>
<option value='' disabled hidden>____________</option>
<option value='11'>John Doe</option>
</select>
<h2 class='print'>August 8th, 2021</h2>
<hr class='print'>
</div>
<div id='rubric'>
<section>
<div class='category'></div>
<div class='category'>Beginning</div>
<div class='category'>Approaching</div>
<div class='category'>Meeting</div>
<div class='category'>Exceeding</div>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Inquiry<br><i>6.R.1</i></div>
</label>
<input type='radio' id='b_6.R.1' name='score[6.R.1]' value='1'>
<label for='b_6.R.1'>
<div class='tile'>Student can choose a topic but may need help <b>constructing questions</b> and <b>using resources</b> to find information.</div>
</label>
<input type='radio' id='a_6.R.1' name='score[6.R.1]' value='2'>
<label for='a_6.R.1'>
<div class='tile'>Student can ask their own questions but may need help <b>finding information</b>on their topic.</div>
</label>
<input type='radio' id='m_6.R.1' name='score[6.R.1]' value='3'>
<label for='m_6.R.1'>
<div class='tile'>Student can utilize their own viable research questions to find information about a specific topic.</div>
</label>
<input type='radio' id='e_6.R.1' name='score[6.R.1]' value='4'>
<label for='e_6.R.1'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Recording Info<br><i>6.R.2</i></div>
</label>
<input type='radio' id='b_6.R.2' name='score[6.R.2]' value='1'>
<label for='b_6.R.2'>
<div class='tile'>Student can take notes using a provided template or organizer <b>with help</b> from the teacher.</div>
</label>
<input type='radio' id='a_6.R.2' name='score[6.R.2]' value='2'>
<label for='a_6.R.2'>
<div class='tile'>Student can take notes provided by a template or organizer <b>AND</b> can <b>organize</b> those notes for a specific purpose with help from the teacher.</div>
</label>
<input type='radio' id='m_6.R.2' name='score[6.R.2]' value='3'>
<label for='m_6.R.2'>
<div class='tile'>Student can take and organize notes from various print and/or digital sources.</div>
</label>
<input type='radio' id='e_6.R.2' name='score[6.R.2]' value='4'>
<label for='e_6.R.2'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Reliability<br><i>6.R.3</i></div>
</label>
<input type='radio' id='b_6.R.3' name='score[6.R.3]' value='1'>
<label for='b_6.R.3'>
<div class='tile'>Student can evaluate the importance of information gathered but may need help establishing credibility.</div>
</label>
<input type='radio' id='a_6.R.3' name='score[6.R.3]' value='2'>
<label for='a_6.R.3'>
<div class='tile'>Students can evaluate the importance <b>AND credibility</b> of information gathered with help from a teacher. </div>
</label>
<input type='radio' id='m_6.R.3' name='score[6.R.3]' value='3'>
<label for='m_6.R.3'>
<div class='tile'>Student can evaluate the relevance and reliability of information gathered.</div>
</label>
<input type='radio' id='e_6.R.3' name='score[6.R.3]' value='4'>
<label for='e_6.R.3'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<input type='hidden' name='standard' value='4'>
<input type='hidden' name='ucid' value='1'>
<textarea placeholder='Add comments..' name='comment'></textarea>
<p class='print'>Comments:</p>
</div>
<div id='controls' class='center'>
<button class='button grey-btn' disabled>Record Progress</button>
</div>
</form>
I think this is the perfect use-case for CSS Grid. I would recommend making the <section> a grid and using something like repeat(5, 20%) or explicitly use 20% 20% 20% 20% 20% for your grid-template-columns definition. You might also use a combination of repeat() and minmax() for column generation when building out responsive grids.
Lastly, just make sure to give each .tile a height of 100% so they occupy all of the vertical space in each grid item.
.print {display: none}
body {margin: 0}
#title {
max-width: 1880px;
text-align: center;
font-size: 35px}
#title select {
font-size: 35px;
appearance: none;
outline: none;
border: none;
-webkit-appearance: none;
background-color: transparent}
/* --------[RUBRIC]-------- */
#rubric {margin: 10px 25px 55px 25px;}
#rubric textarea {
width: 100%;
margin-bottom: 20px;
border: 1px solid black;
box-sizing: border-box;}
section {
display: grid;
/* grid-template-columns: 20% 20% 20% 20% 20%; */
grid-template-columns: repeat(5, 20%);
gap: 0;
}
.tile {
box-sizing: border-box;
height: 100%;
overflow: auto;
padding: 5px 10px 20px 10px;
border-radius: 2px;
border: 1px solid black;
font-size: 0.90rem;
text-align: center}
#rubric input[type=radio] {display: none}
#rubric input:checked + label .tile {background-color: #B488E7}
<form action='rubric.int.php' method='post'>
<div id='title'>
Research & Inquiry
<select name='usid' onchange='enableButton()' required>
<option value='' disabled hidden>____________</option>
<option value='11'>John Doe</option>
</select>
<h2 class='print'>August 8th, 2021</h2>
<hr class='print'>
</div>
<div id='rubric'>
<section>
<div class='category'></div>
<div class='category'>Beginning</div>
<div class='category'>Approaching</div>
<div class='category'>Meeting</div>
<div class='category'>Exceeding</div>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Inquiry<br><i>6.R.1</i></div>
</label>
<input type='radio' id='b_6.R.1' name='score[6.R.1]' value='1'>
<label for='b_6.R.1'>
<div class='tile'>Student can choose a topic but may need help <b>constructing questions</b> and <b>using resources</b> to find information.</div>
</label>
<input type='radio' id='a_6.R.1' name='score[6.R.1]' value='2'>
<label for='a_6.R.1'>
<div class='tile'>Student can ask their own questions but may need help <b>finding information</b>on their topic.</div>
</label>
<input type='radio' id='m_6.R.1' name='score[6.R.1]' value='3'>
<label for='m_6.R.1'>
<div class='tile'>Student can utilize their own viable research questions to find information about a specific topic.</div>
</label>
<input type='radio' id='e_6.R.1' name='score[6.R.1]' value='4'>
<label for='e_6.R.1'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Recording Info<br><i>6.R.2</i></div>
</label>
<input type='radio' id='b_6.R.2' name='score[6.R.2]' value='1'>
<label for='b_6.R.2'>
<div class='tile'>Student can take notes using a provided template or organizer <b>with help</b> from the teacher.</div>
</label>
<input type='radio' id='a_6.R.2' name='score[6.R.2]' value='2'>
<label for='a_6.R.2'>
<div class='tile'>Student can take notes provided by a template or organizer <b>AND</b> can <b>organize</b> those notes for a specific purpose with help from the teacher.</div>
</label>
<input type='radio' id='m_6.R.2' name='score[6.R.2]' value='3'>
<label for='m_6.R.2'>
<div class='tile'>Student can take and organize notes from various print and/or digital sources.</div>
</label>
<input type='radio' id='e_6.R.2' name='score[6.R.2]' value='4'>
<label for='e_6.R.2'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Reliability<br><i>6.R.3</i></div>
</label>
<input type='radio' id='b_6.R.3' name='score[6.R.3]' value='1'>
<label for='b_6.R.3'>
<div class='tile'>Student can evaluate the importance of information gathered but may need help establishing credibility.</div>
</label>
<input type='radio' id='a_6.R.3' name='score[6.R.3]' value='2'>
<label for='a_6.R.3'>
<div class='tile'>Students can evaluate the importance <b>AND credibility</b> of information gathered with help from a teacher. </div>
</label>
<input type='radio' id='m_6.R.3' name='score[6.R.3]' value='3'>
<label for='m_6.R.3'>
<div class='tile'>Student can evaluate the relevance and reliability of information gathered.</div>
</label>
<input type='radio' id='e_6.R.3' name='score[6.R.3]' value='4'>
<label for='e_6.R.3'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<input type='hidden' name='standard' value='4'>
<input type='hidden' name='ucid' value='1'>
<textarea placeholder='Add comments..' name='comment'></textarea>
<p class='print'>Comments:</p>
</div>
<div id='controls' class='center'>
<button class='button grey-btn' disabled>Record Progress</button>
</div>
</form>
Edit: Your source from pastebin was missing a closing </html> tag.
<body>
<title>Presentations Rubric</title>
<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>
<form id='rubric' action='rubric.int.php' method='post'>
<div id='title'>
Presentations
<select name='usid' onchange='enableButton()' required>
<option value='' disabled hidden>____________</option>
<option value='11'>John Doe</option>
</select>
<h2 class='print'>August 8th, 2021</h2>
<hr class='print'>
</div>
<div id='rubric'>
<section>
<div class='category'></div>
<div class='category'>Beginning</div>
<div class='category'>Approaching</div>
<div class='category'>Meeting</div>
<div class='category'>Exceeding</div>
</section>
<section>
<input type='radio' id='5' disabled>
<label for='5'>
<div class='tile'>
Using Technology
<br>
<i>7.W.1</i>
</div>
</label>
<input type='radio' id='b_7.W.1' name='score[7.W.1]' value='1'>
<label for='b_7.W.1'>
<div class='tile'>
Student
<b>needs guidance and support</b>
to create multimodal content that effectively communicates an idea using appropriate technology and media.
</div>
</label>
<input type='radio' id='a_7.W.1' name='score[7.W.1]' value='2'>
<label for='a_7.W.1'>
<div class='tile'>
Student
<b>attempts</b>
to create multimodal content that effectively communicates an idea using appropriate technology and media.
</div>
</label>
<input type='radio' id='m_7.W.1' name='score[7.W.1]' value='3'>
<label for='m_7.W.1'>
<div class='tile'>Student will create multimodal content that effectively communicates an idea using appropriate technology and media.</div>
</label>
<input type='radio' id='e_7.W.1' name='score[7.W.1]' value='4'>
<label for='e_7.W.1'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<section>
<input type='radio' id='5' disabled>
<label for='5'>
<div class='tile'>
Presentation Creation
<br>
<i>7.W.2</i>
</div>
</label>
<input type='radio' id='b_7.W.2' name='score[7.W.2]' value='1'>
<label for='b_7.W.2'>
<div class='tile'>
Student
<b>needs guidance and support</b>
to create presentations that integrate visual displays and other multimedia to enrich the presentation.
</div>
</label>
<input type='radio' id='a_7.W.2' name='score[7.W.2]' value='2'>
<label for='a_7.W.2'>
<div class='tile'>
Student
<b>attempts</b>
to create presentations that integrate visual displays and other multimedia to enrich the presentation.
</div>
</label>
<input type='radio' id='m_7.W.2' name='score[7.W.2]' value='3'>
<label for='m_7.W.2'>
<div class='tile'>Student will create presentations that integrate visual displays and other multimedia to enrich the presentation.
</div>
</label>
<input type='radio' id='e_7.W.2' name='score[7.W.2]' value='4'>
<label for='e_7.W.2'>
<div class='tile'>Student meeting all requirements with a degree of excellency.
</div>
</label>
</section>
<section>
<input type='radio' id='5' disabled>
<label for='5'>
<div class='tile'>
Presentation Skills
<br>
<i>1.W.1</i>
</div>
</label>
<input type='radio' id='b_1.W.1' name='score[1.W.1]' value='1'>
<label for='b_1.W.1'>
<div class='tile'>
Student attempts to give
<b>simple</b>
presentations in a group or individually, organizing information and determining appropriate content for audience with
<b>full guidance and support</b>
.
</div>
</label>
<input type='radio' id='a_1.W.1' name='score[1.W.1]' value='2'>
<label for='a_1.W.1'>
<div class='tile'>
Student gives presentations in a group or individually, organizing information and determining appropriate content for audience with
<b>some guidance and support</b>
.
</div>
</label>
<input type='radio' id='m_1.W.1' name='score[1.W.1]' value='3'>
<label for='m_1.W.1'>
<div class='tile'>Student give presentations in a group or individually, organizing information and determining appropriate content for audience.</div>
</label>
<input type='radio' id='e_1.W.1' name='score[1.W.1]' value='4'>
<label for='e_1.W.1'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<input type='hidden' name='standard' value='5'>
<input type='hidden' name='ucid' value='1'>
<textarea placeholder='Add comments..' name='comment'></textarea>
<p class='print'>Comments:</p>
</div>
<div id='controls'>
<button class='button grey-btn' disabled>Record Progress</button>
</div>
</form>
</body>
</html>
<style>
.print {
display: none
}
body {
margin: 0
}
#title {
padding: 20px 0px;
text-align: center;
font-size: 35px
}
#title select {
font-size: 35px;
appearance: none;
outline: none;
border: none;
-webkit-appearance: none;
background-color: transparent
}
/* --------[RUBRIC]-------- */
#rubric {
margin: 10px 25px 0px 25px;
}
#rubric textarea {
width: 100%;
border: 1px solid black;
box-sizing: border-box;
}
section {
display: grid;
grid-template-columns: repeat(5, 20%);
gap: 0;
}
.tile {
box-sizing: border-box;
height: 100%;
overflow: auto;
padding: 5px 10px 20px 10px;
border-radius: 2px;
border: 1px solid black;
font-size: 0.90rem;
text-align: center
}
.tile:hover:not(.category) {
background-color: #D4BBF1;
transform: scale(1.03);
}
.category {
font-size: 1.1rem;
font-weight: bold;
text-align: center;
}
section input[type=radio] {
display: none
}
section input:checked + label .tile {
background-color: #B488E7
}
#controls {
margin-top: 20px;
padding-bottom: 40px;
display: flex;
justify-content: center;
}
/* --------[PRINT]-------- */
.print {
display: none
}
#media print {
body {
margin: 10px
}
.print {
display: block
}
select {
display: none
}
h2 {
margin: 0;
text-align: center;
font-size: 20px
}
.category {
padding-top: 50px;
}
.tile {
font-size: 12px !important;
}
textarea {
display: none
}
.center {
display: none
}
}
</style>
All you have to do is to give display:flex for the same height, flex-direction: column to be neat, and flex: 1 1 0px so that they are the same width (20% of the screen) to each child of the section (using section * to select all children of the section).
.print {display: none}
body {margin: 0}
#title {
max-width: 1880px;
text-align: center;
font-size: 35px}
#title select {
font-size: 35px;
appearance: none;
outline: none;
border: none;
-webkit-appearance: none;
background-color: transparent}
/* --------[RUBRIC]-------- */
#rubric {margin: 10px 25px 55px 25px;}
#rubric textarea {
width: 100%;
margin-bottom: 20px;
border: 1px solid black;
box-sizing: border-box;}
section {display: flex;}
section * {
display:flex;
flex-direction: column;
flex: 1 1 0px;
}
.tile {
flex: 1 1 0px;
box-sizing: border-box;
padding: 5px 10px 20px 10px;
border-radius: 2px;
border: 1px solid black;
font-size: 0.90rem;
text-align: center}
#rubric input[type=radio] {display: none}
#rubric input:checked + label .tile {background-color: #B488E7}
<form action='rubric.int.php' method='post'>
<div id='title'>
Research & Inquiry
<select name='usid' onchange='enableButton()' required>
<option value='' disabled hidden>____________</option>
<option value='11'>John Doe</option>
</select>
<h2 class='print'>August 8th, 2021</h2>
<hr class='print'>
</div>
<div id='rubric'>
<section>
<div class='category'></div>
<div class='category'>Beginning</div>
<div class='category'>Approaching</div>
<div class='category'>Meeting</div>
<div class='category'>Exceeding</div>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Inquiry<br><i>6.R.1</i></div>
</label>
<input type='radio' id='b_6.R.1' name='score[6.R.1]' value='1'>
<label for='b_6.R.1'>
<div class='tile'>Student can choose a topic but may need help <b>constructing questions</b> and <b>using resources</b> to find information.</div>
</label>
<input type='radio' id='a_6.R.1' name='score[6.R.1]' value='2'>
<label for='a_6.R.1'>
<div class='tile'>Student can ask their own questions but may need help <b>finding information</b>on their topic.</div>
</label>
<input type='radio' id='m_6.R.1' name='score[6.R.1]' value='3'>
<label for='m_6.R.1'>
<div class='tile'>Student can utilize their own viable research questions to find information about a specific topic.</div>
</label>
<input type='radio' id='e_6.R.1' name='score[6.R.1]' value='4'>
<label for='e_6.R.1'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Recording Info<br><i>6.R.2</i></div>
</label>
<input type='radio' id='b_6.R.2' name='score[6.R.2]' value='1'>
<label for='b_6.R.2'>
<div class='tile'>Student can take notes using a provided template or organizer <b>with help</b> from the teacher.</div>
</label>
<input type='radio' id='a_6.R.2' name='score[6.R.2]' value='2'>
<label for='a_6.R.2'>
<div class='tile'>Student can take notes provided by a template or organizer <b>AND</b> can <b>organize</b> those notes for a specific purpose with help from the teacher.</div>
</label>
<input type='radio' id='m_6.R.2' name='score[6.R.2]' value='3'>
<label for='m_6.R.2'>
<div class='tile'>Student can take and organize notes from various print and/or digital sources.</div>
</label>
<input type='radio' id='e_6.R.2' name='score[6.R.2]' value='4'>
<label for='e_6.R.2'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<input type='hidden' name='standard' value='4'>
<input type='hidden' name='ucid' value='1'>
<textarea placeholder='Add comments..' name='comment'></textarea>
<p class='print'>Comments:</p>
</div>
<div id='controls' class='center'>
<button class='button grey-btn' disabled>Record Progress</button>
</div>
</form>
I need to do the same as here:
http://deinehelfer24.de/renovierungen/
As I understand it, this is done on contact form 7, but how are the images and multiple selections implemented?
I feel generous today, simpe example ho you can style labels
https://jsfiddle.net/Beneris/65mdtpo3/28/
HTML
<form>
<div class="input-group">
<div class="input-wrap">
<input type="radio" name="group1" id="group1-1" value="1">
<label for="group1-1">
<figure><img src="http://placekitten.com/g/100/100"><h3>Radio 1</h3></figure>
</label>
</div>
<div class="input-wrap">
<input type="radio" name="group1" id="group1-2" value="2">
<label for="group1-2">
<figure><img src="http://placekitten.com/g/100/100"><h3>Radio 2</h3></figure>
</label>
</div>
<div class="input-wrap">
<input type="radio" name="group1" id="group1-3" value="3">
<label for="group1-3">
<figure><img src="http://placekitten.com/g/100/100"><h3>Radio 3</h3></figure>
</label>
</div>
</div>
<div class="input-group">
<div class="input-wrap to-toggle 1 3">
<input type="checkbox" name="group2" id="group2-1" value="1">
<label for="group2-1">
<figure><img src="http://placekitten.com/g/100/100"><h3>checkbox 1</h3></figure>
</label>
</div>
<div class="input-wrap to-toggle 1 2">
<input type="checkbox" name="group2" id="group2-2" value="2">
<label for="group2-2">
<figure><img src="http://placekitten.com/g/100/100"><h3>checkbox 2</h3></figure>
</label>
</div>
<div class="input-wrap to-toggle 1 2 3">
<input type="checkbox" name="group2" id="group2-3" value="3">
<label for="group2-3">
<figure><img src="http://placekitten.com/g/100/100"><h3>checkbox 3</h3></figure>
</label>
</div>
</div>
</form>
CSS
.radio-group {
display:block;
}
.input-group .input-wrap{
display:inline-block;
vertical-align: top;
padding: 10px;
}
label figure {
background-color: #ccc;
padding: 5px 10px;
border-radius: 0 0 5px 5px;
cursor: pointer;
}
figure h3 {
text-align: center;
}
.input-group input:checked ~ label figure {
background-color: red;
}
.input-wrap input {
display:none;
}
JS
$('.to-toggle').hide();
$('input[name=group1]').on('change', function(){
var val = $(this).val();
$('.to-toggle').hide();
$('.to-toggle input').prop('checked', false);
$('.to-toggle.' + val).show();
//alert(val);
});
How to put form labels inside a input form only on mobile?
example:
my code:
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10"required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Something like this? I changed the position of input and label in the HTML
.form-group {
position: relative;
min-height: 3.5em;
}
input.form-control {
height: 3em;
position: absolute;
top: 0;
left: 0;
}
label.form-control-label {
position: absolute;
font-size: .8em;
top: 0;
left: 5px;
text-transform: uppercase;
}
<form>
<div class="form-group">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
<label class="form-control-label" for="firstName">Firstname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
<label class="form-control-label" for="lastName">Lastname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
<label class="form-control-label" for="phone_number">Mobile Number</label>
</div>
</form>
You can use like the below method. We have to write mobile screen style with in the media queries
body{
font-family:arial;
}
.form-group{
position:relative;
}
.input-element{
padding:30px 5px 5px 5px;
width:100%;
border:1px solid #CCC;
}
#media screen and (max-width: 767px) {
.label-element{
position:absolute;
top:5px;
left:5px;
font-size:12px;
color:#666;
}
}
<div class="form-group"><label class="label-element">First Name</label>
<input type="text" class="input-element"/></div>
I've just added a border to form-group and overwritten some bootstrap code.
For mobile only, try to use CSS3 Media Queries.
You could try this:
.form-group {
border: 1px solid black; /* Change border width and color here */
}
/* the !important declaration is for this snippet, because this snippet include bootstrap after this declarations **/
.form-control {
border: none !important; /* No border for input */
box-shadow: none !important; /* No border for input */
}
.form-control:focus {
box-shadow: none !important; /* Remove the blue shining at focus */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Inspired by another answer, here is a short way to do it:
.input-group {
position: relative;
}
.input-label {
position: absolute;
top: 5px;
left: 5px;
color: #666;
}
.input-element {
padding: 30px 5px 5px 5px;
}
<div class="input-group">
<label class="input-label">First name</label>
<input type="text" class="input-element" />
</div>
I am having issues trying to make this form responsive. Whenever I make my screen smaller, my form won't resize. I am using bootstrap, but I am not sure how to make that happen. I also don't know how to align "email" label with the other labels.
<html>
<head>
<title>Title</title>
</head>
<style>
#myform {
border: 1px outset #ccc;
background: #fff repeat-x;
padding: 50px;
margin: 20px auto;
width: 500px;
height: 450px;
font-size: 14px;
-moz-border-radius: 4px;
}
#myform h3 {
text-align: left;
margin: 0 0 10px 0;
}
#inputs label,
#inputs input,
#inputs textarea,
#inputs select {
display: block;
width: 300px;
float: left;
margin-bottom: 10px;
}
#inputs input {
height: 40px;
}
#inputs label {
text-align: right;
width: 75px;
padding-right: 20px;
}
#inputs br {
clear: left;
}
#agree {
font-size: 10.5px;
}
</style>
<body>
<div class="container">
<form id="myform" action="#">
<h3>Your Information</h3>
<div id="inputs">
<!-- username -->
<label for="username">Firstname</label>
<br/>
<input id="username" type="text" placeholder="Fullname" /><br />
<!-- password -->
<label for="password">Password</label>
<br/>
<input id="password" type="password" placeholder="Password" />
<br />
<!-- email -->
<label for="email">Email </label>
<br/>
<input id="email" type="text" placeholder="Email" />
</div>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">
Proceed
</button>
</p>
<label id="agree">
By registering you agree to Elephant's Terms of Service and Privacy Policy.
<input type="checkbox" id="check" title="Required to proceed" />
</label>
</form>
</div>
<body>
</html>
As you already use bootstrap take advantage of bootstrap css classes. Here is official documentation about forms (https://v4-alpha.getbootstrap.com/components/forms/). One of form solution would be:
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">username:</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="Username" class="form-control input-md" required="">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">password:</label>
<div class="col-md-4">
<input id="password" name="password" type="password" placeholder="password" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">email:</label>
<div class="col-md-4">
<input id="email" name="email" type="text" placeholder="email" class="form-control input-md" required="">
</div>
</div>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="checkboxes"></label>
<div class="col-md-4">
<div class="checkbox">
<label for="checkboxes-0">
<input type="checkbox" name="checkboxes" id="checkboxes-0" value="1">
By registering you agree to Elephant's Terms of Service and Privacy Policy.
</label>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton">Single Button</label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
</div>
</div>
</fieldset>
</form>