I'm trying to make a basic multi-line input form with html css etc... For the inputs I'm using a contenteditable="true" span instead of the regular , and also I don't want to use tables.
That being said, I'm trying to line of the text "labels" and the input boxes, like this picture:
everythings working fine more or less, except when the contenteditable reaches multiple lines. I need the multi-line thing to line up with the labels and not reset to the beginning of the line. Here's the code so far:
input, .new_input {
border:0;
outline:0;
background:transparent;
border-bottom:1px solid black;
}
.titlething {
display:inline-block;
text-align:right;
width:80px;
margin-left:-20px;
}
#word_edit {
position:absolute;
max-width:300px;
border:1px #0F23D5 solid;
padding:4px;
background:#A1C9E4;
border-radius:15px;
padding:15px;
}
<div id="word_edit">
<label>
<span class="titlething">Meaning</span>
<span class="new_input" data-placeholder="Meaning:" data-name="meaning" contenteditable="true">some default text</span></br>
</label>
<label>
<span class="titlething">Phonetic</span>
<span class="new_input" data-placeholder="Phonetic:" contenteditable="true" data-name="phonetic">hi</span></br>
</label>
<label>
<span class="titlething">Other</span>
<span class="new_input" data-placeholder="Other:" contenteditable="true" data-name="other">test</span></br>
</label>
<button data-name="done">Done!</button>
</div>
As you can see, everything works more-or-less until you get to the next line, but I need the new line to start at the same place as the first line.
Any ideas?
Please look at the snippet below, I added 2 lines:
display: inline-block; to .new_input
and
vertical-align: top; to .titlething
input,
.new_input {
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid black;
display: inline-block;
}
.titlething {
display: inline-block;
text-align: right;
width: 80px;
margin-left: -20px;
vertical-align: top;
}
#word_edit {
position: absolute;
max-width: 300px;
border: 1px #0F23D5 solid;
padding: 4px;
background: #A1C9E4;
border-radius: 15px;
padding: 15px;
}
<div id="word_edit">
<label>
<span class="titlething">Meaning</span>
<span class="new_input" data-placeholder="Meaning:" data-name="meaning" contenteditable="true">some default text</span></br>
</label>
<label>
<span class="titlething">Phonetic</span>
<span class="new_input" data-placeholder="Phonetic:" contenteditable="true" data-name="phonetic">hi</span></br>
</label>
<label>
<span class="titlething">Other</span>
<span class="new_input" data-placeholder="Other:" contenteditable="true" data-name="other">test</span></br>
</label>
<button data-name="done">Done!</button>
</div>
Related
I want to create an input that holds an integer value. The input value will be increased by 1 if the caret-up button is clicked and decrease by 1 if the cater-down button is clicked.
My problem is the style of the down-caret is wrong. I would like to place the down-caret at the top of the blue rectangle.
Currently, the down-caret is at the bottom of the div. Below is an image of the currently output.
I tried several things like flex, absolute position, etc. But these are overlapping areas of the Red div and Blue div.
// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
input.value = parseInt(input.value) + parseInt(value);
}
/* style the qty div to display both input and buttons div in the same line*/
.qty {
width: 250px;
height: 50px;
}
/* add the wrapper div to easy styling the element*/
#remind_number_wrapper {
width: 230px;
float: left;
height: 100%;
}
/* adjust the height of the input to fit out the div parent, it easier to see*/
#remind_number_wrapper input {
width: 220px;
height: 100%;
}
/* style the buttons div to display input and caret in the same line*/
#buttons {
width: 20px;
height: 100%;
float: right;
display: block;
}
/* style the action button to fit the height of the div*/
.action_btn {
height: 25px;
}
#plus_remind {
font: 33px/1 Arial,sans-serif;
border: 1px solid red;
cursor: pointer;
}
#minus_remind {
font: 33px/1 Arial,sans-serif;
border: 1px solid blue;
cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="qty">
<div id="remind_number_wrapper">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
</div>
<div id="buttons">
<!-- add className 'action_btn' to easier to style button in the same place-->
<div class="action_btn" id="plus_remind" onclick="addValue(1)">
<!-- change the fas to fa for the right class of font-awesome -->
<i class="fa fa-caret-up"></i>
</div>
<div class="action_btn" id="minus_remind" onclick="addValue(-1)">
<i class="fa fa-caret-down"></i>
</div>
</div>
</div>
Your description is somewhat unclear, if I understood you correctly, check out the example below to see whether it is what you want or not.
* {
box-sizing: border-box;
}
.qty {
position: relative;
}
.new {
position: absolute;
right: 0;
top: 0;
}
#plus_remind, #minus_remind {
margin: 0;
height: 24px;
width: 22px;
font: 33px/1 Arial,sans-serif;
cursor: pointer;
}
#plus_remind {
border: 1px solid blue;
}
#minus_remind {
border: 1px solid red;
}
input {
height: 48px;
font-size: 1.5rem;
margin: 0px;
padding: 0px;
line-height: 1.5rem;
width: 100%;
}
<div class="qty">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="25">
<div class="new">
<div onclick="document.getElementById('remind_number').value-=-1;" class="" id="plus_remind">
<i class="fas fa-caret-up"></i>
</div>
<div onclick="document.getElementById('remind_number').value-=1;" class="" id="minus_remind">
<i class="fas fa-caret-down"></i>
</div>
</div>
For number, there is another solution that uses the input with type number
<input type="number" placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number">
Another way, I remove usage of font-awesome and create triangle by pure CSS
// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
input.value = parseInt(input.value) + parseInt(value);
}
.qty {
width: 200px;
}
#remind_number_wrapper {
float: left;
}
i {
display: inline-block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
cursor: pointer;
}
.up {
border-bottom: 5px solid black;
margin-bottom: 0px;
}
.down {
border-top: 5px solid black;
margin-top: 0px;
}
<div class="qty">
<div id="remind_number_wrapper">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
</div>
<div id="buttons">
<!-- add className 'action_btn' to easier to style button in the same place-->
<div class="action_btn" id="plus_remind" onclick="addValue(1)">
<i class="up"></i>
</div>
<div class="action_btn" id="minus_remind" onclick="addValue(-1)">
<i class="down"></i>
</div>
</div>
</div>
I dont know much about css.
I have _sideButton with default color white
._sideButton{background-color:white;height:100%;left:0;position:absolute;top:0;width:5px}
._sideButton:active{background-color:red;height:100%;left:0;position:absolute;top:0;width:5px}
How when we choose BUTTON 2, the _sideButton turns red, and always becomes red.
When selecting BUTTON 1, BUTTON 1 _sideButton turns red, then BUTTON2 _sideButton becomes default (white).
*Here === JSFiddle ===
Thx Before -/-
/*** Here guys ***/
._sideButton{background-color:white;height:100%;left:0;position:absolute;top:0;width:5px}
._sideButton:active{background-color:red;height:100%;left:0;position:absolute;top:0;width:5px}
._tabFolder{background-color:rgba(29, 33, 41, 1); cursor:pointer;position:relative;}
._tabFolder:hover{background-color:rgba(255,255,255,0.1)}
._tabFolder:active{background-color:rgba(29, 33, 41, 1)}
._itemPosition{align-items:center;display:flex}
._5bme ._sideFolder{background-color:#066cd2}
._iconText:hover ._1i5y,.uiPopover.selected ._1i5y{display:block}
._iconText{align-items:center;display:flex;justify-content:space-between;width:100%;margin-left:13px;}
<body style="background:grey;">
<div class="_tabFolder _itemPosition" role="presentation" style="height: 40px; user-select: none;">
<div class="_sideButton"></div>
<div class="_iconText" style="width: 215px">
<span style="color:white;">BUTTON 1</span>
</div>
</div>
<div class="_tabFolder _itemPosition" role="presentation" style="height: 40px; user-select: none;">
<div class="_sideButton"></div>
<div class="_iconText" style="width: 215px">
<span style="color:white;">BUTTON 2</span>
</div>
</div>
</body>
For CSS you can hide <input type='checkbox' or 'radio'> and use <label for='ID OF RADIO/CHECKBOX'></label>. The label would act as the button while the chx/rad would be placed before the label and would keep the label's "state" persistent (ex. change to red and stay red indefinitely.) The state would be determined by whether the rad/.chx was :checked.
Example
.radio:checked + .label { color:red }
A .radio button is :checked and right after it + is a .label that text turns red. The + is an adjacent sibling combinator and you may so this as well: ~ general sibling combinator.
You can also use the :target selector. Take an <a>nchor tag assign its href attribute the value of in element's #id. Then assign the element a :target selector. Similar to the rad/chx & label combo, it allows us to use CSS to change an elements style dynamically and keep it persistent.
Although the demo shows an "older" sibling (i.e. radio button) and "younger: sibling (i.e. label) relationship, this demo can easily work in a parent child relationship as well (hint: remove +). Note there's no required relationship that needs to be between an <a> and element:target (other than that they both have to be on the same document.
References
Checkbox/Radio Button & Label Hack
:target selector.
Modified OP: https://jsfiddle.net/zer00ne/764k6qo0/
Demo
/* Radio Buttons & Labels */
/* :checked & for='ID OF RADIO' */
.rad {
display: none
}
.lab {
border-radius: 9px;
border: 2px inset grey;
padding: 3px 5px;
font-size: 24px;
cursor: pointer;
margin: 20px 10px;
}
.lab::before {
content: 'WHITE';
}
.rad:checked+.lab {
background: red;
color: white;
}
.rad:checked+.lab::before {
content: '\a0\a0RED\a0\a0';
}
/* Anchor & Any Element */
/* href='#ID OF ELEMENT' & #ANY:target */
a {
display: inline-block;
margin: 0 5px;
color: yellow;
background: #000;
padding: 2px 4px;
}
a:first-of-type {
color: #ff4c4c
}
a:nth-of-type {
color: yellow
}
a:last-of-type {
color: lime
}
b {
display: block;
height: 48px;
width: 48px;
border-radius: 50%;
margin: 5px auto;
border: 3px outset grey;
background: rgba(0, 0, 0, .2)
}
#T1:target {
background: red;
}
#T2:target {
background: yellow
}
#T3:target {
background: green
}
<input id='R1' class='rad' name='rad' type='radio'>
<label id='L1' class='lab' for='R1'></label>
<input id='R2' class='rad' name='rad' type='radio'>
<label id='L2' class='lab' for='R2'></label>
<input id='R3' class='rad' name='rad' type='radio'>
<label id='L3' class='lab' for='R3'></label>
<hr>
<a href='#T1' target='_self'>STOP</a>
<a href='#T2' target='_self'>SLOW</a>
<a href='#T3' target='_self'>GO</a>
<b id='T1'> </b>
<b id='T2'> </b>
<b id='T3'> </b>
I am building a form to measure carpets dimension. In the form there is radio button which user can choose type of carpet. I want to make when the radio button checked, the image of the carpet change based on the selected radio button.
1st image : radio button to choose carpet size
2nd image: carpet change based on selected radio button
Below is the code:
<form class="carpet-detail text-center container">
<p class="text-center">Upload your carpet’s photo here :</p>
<div class="upload-carpet">
<div id="image-preview">
<input id="image-upload" name="image" type="file">
</div>
<label for="image-upload" id="image-label">Choose File</label>
</div>
<p class="carpet-name">Carpet 1</p>
<p>Choose your carpet shape :</p>
<div class="carpet-shape">
<div class="choose-carpet">
<input checked class="radio-shape" id="carpet-shape-1" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-1">Rectangular</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-2" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-2">Square</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-3" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-3">Round</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-4" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-4">Oval</label>
</div>
</div>
<p>Please insert your carpet size :</p>
<img alt="carpet rectangle" class="carpet-icon" height="116" src="img/icons/carpet-rectangle.svg" width="194">
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Width :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-width">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-width" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-width">
<img src="img/icons/size-plus.svg" alt="minus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Length :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-length">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-length" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-length">
<img src="img/icons/size-plus.svg" alt="plus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
</form>
You can use the jquery's .change event to do this.
First assign the attribute valueto the radios.
<input class="radio-shape" value="Square" id="carpet-shape-2" name="carpet-shape" type="radio">
Then use the change following juery to trigger the event.
$('input:radio[name="carpet-shape"]').change(
function(){
var $src = "";
if ($(this).val() == 'Square') {
$src = "img/icons/carpet-square.svg";
}
else if ($(this).val() == 'Rectangle') {
$src = "img/icons/carpet-rectangle.svg";
}
else if ($(this).val() == 'Round') {
$src = "img/icons/carpet-round.svg";
}
else{
$src = "img/icons/carpet-oval.svg"
}
$('.carpet-icon').attr('src',$src);
});
Here is a full working jsfiddle
For more information on change event, checkout the jQuery documentation on it.
You just need a JavaScript or jQuery event listener.
//jQuery version
$('#radio1').on('click', function() {
$('#image1').attr('src', 'myNewImage.jpg');
});
//Vanilla JavaScript
document.getElementById('radio1').addEventListener('click', null,
function() {
document.getElementsById('radio1').setAttribute('src', 'myNewImage.jpg');
});
You'd obviously need to add one for each radio button.
You can change the image by using CSS selectors like ~ , +.
By this method, if the checkbox is checked we can select the siblings by using the ~, + selector.
Then we can apply the styles to the selected siblings.
Here I have given the code snippet and working demo.
CSS CODE
.output-shape {
width: 200px;
}
//Square
#square ~ .output-shape{
width: 200px;
}
//Rectangle
#rectangle:checked ~ .output-shape{
width: 280px;
}
//Circle
#circle:checked ~ .output-shape{
border-radius: 50%;
width: 200px;
}
HTML CODE
// Input Field
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
// Label Field
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
// OUTPUT
<div class="output-shape"></div>
Working DEMO
body, html {
font-family: sans-serif;
}
.box-overlay {
background-color: coral;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.box-content {
background-color: #fff;
max-width: 600px;
text-align: center;
border-radius: 15px;
min-height: 350px;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.output-shape {
width: 200px;
height: 200px;
background-color: white;
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
input {
display: none;
}
label {
padding: 10px;
border: 1px solid gray;
display: inline-block;
border-radius: 5px;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
.option-name {
font-size: 20px;
margin-left: 10px;
margin-right: 10px;
text-transform: uppercase;
}
/* Circle */
label[for="circle"] {
color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-content [for="circle"] {
color: #fff;
background-color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name{
color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name:before{
content:"Circle" !important;
}
#circle:checked ~ .box-content .output .output-shape{
border-radius: 50%;
background-color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-overlay {
background-color: dodgerblue !important;
}
/* Rectangle */
label[for="rectangle"] {
color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-content [for="rectangle"] {
color: #fff;
background-color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name{
color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name:before{
content:"rectangle" !important;
}
#rectangle:checked ~ .box-content .output .output-shape{
width: 280px;
background-color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-overlay {
background-color: darkorange !important;
}
/* Square */
label[for="square"] {
color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-content [for="square"] {
color: #fff;
background-color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name{
color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name:before{
content:"square" !important;
}
#square:checked ~ .box-content .output .output-shape{
background-color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-overlay {
background-color: #3FBB76 !important;
}
.box-overlay, .output-shape, .option-name:before {
transition: all linear 0.50s;
-webkit-transition: all linear 0.50s;
-o-transition: all linear 0.50s;
-moz-transition: all linear 0.50s;
}
#media (max-width: 768px) {
.box-content {
margin-top: 20px;
}
}
#media (min-width: 769px) {
body, html {
/* height: 100%;*/
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CSS Shape transition </title>
</head>
<body>
<div class="box">
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
<div class="box-content">
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
<h4 class="output">
You have selected
<div class="output-shape"></div>
<span class="option-name"></span>
</h4>
</div>
<div class="box-overlay"></div>
</div>
</body>
</html>
Note: To achieve this input element need to present above to the image element.
first you need to see which radio input was checked and then perform some changes on the icon image to show the desired image : I believe you are looking for something like the code below, I haven't tested it so you may
want to tweak it a little bit..
$('.carpet-detail').on('click', 'input', changeImage);
// delegate the the listening to the form so you don't have
// to listen to every radio button, then filter only radio
function changeImage(evt){
// create a function that can receive the event object by
// providing a parameter
var imageId = evt.target.id;
// store the id of the target element in var
switch(imageId){
// a simple switch statement to see which radio was checked
case 'carpet-shape-2':
$('.carpet-icon').attr("src","carpet-shape-2.jpg");
break;
// set the correct image for the chosen radio
case 'carpet-shape-3':
$('.carpet-icon').attr("src","carpet-shape-3.jpg");
break;
case 'carpet-shape-4':
$('.carpet-icon').attr("src","carpet-shape-4.jpg");
default:
$('.carpet-icon').attr("src","default-image.jpg");
}
}
I would like to incorporate a form focus feature where it changes the
color of each icon when you focus on that specific field
<div id="rightside">
<div th:replace="fragments/loginform">
<form method="post" id="login" th:object="${credential}">
<p id="errors" class="warning" role="alert">
<span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
</p>
<p id="block">
<label for="username" class="has-feedback"><i class="fa fa-user" aria-hidden="true"></i></label>
<span th:if="${openIdLocalId}">
<strong>
<span th:utext="${openIdLocalId}"/>
</strong>
<input type="hidden"
id="username"
name="username"
th:value="${openIdLocalId}"/>
</span>
<span th:unless="${openIdLocalId}">
<input class="required textinput has-feedback"
placeholder="UH Username"
id="username"
size="14"
tabindex="1"
type="text"
th:field="*{username}"
th:accesskey="#{screen.welcome.label.netid.accesskey}"
autocomplete="off"
autocapitalize="off"
autocorrect="off"
required="required"
autofocus="autofocus"
/>
</span>
</p>
<p id="block">
<label for="password" class="fontawesome-lock"><i class="fa fa-lock" aria-hidden="true"></i></label>
<input class="required textinput"
placeholder="Password"
type="password"
id="password"
name="password"
size="14"
tabindex="2"
th:accesskey="#{screen.welcome.label.password.accesskey}"
th:field="*{password}"
autocomplete="off"
required="required"
/>
</p>
Here is the CSS
#rightside {
margin-top: 15px;
float: left;
width: 70%;
}
#rightside h3 {
font-size: 110%;
}
#rightside a {
display: block;
}
#rightside input.textinput {
width: 60%;
float: left;
padding-left: 5px;
height: 35px;
border-radius: 7px;
}
#rightside input.textinput:focus {
outline-width: 0;
}
#rightside form label {
background-color: #e1e1e1;
border-radius: 8px 0px 0px 8px;
border: solid 1px #CCC;
border-right: 1px solid #CCC;
color: #000;
display: block;
float: left;
line-height: 50px;
text-align: center;
font-size: 20px;
width: 15%;
height: 50px;
}
#rightside form input[type="text"] {
float: left;
background-color: #fff;
border-radius: 0px 8px 8px 0px;
color: #000;
padding: 0 3%;
width: 77%;
height: 50px;
}
#rightside form input[type="password"] {
float: left;
background-color: #fff;
border-radius: 0px 8px 8px 0px;
color: #000;
padding: 0 3%;
width: 77%;
height: 50px;
}
#rightside form input[type="submit"] {
float: left;
background: #e1e1e1;
width: 99%;
height: 50px;
border-radius: 5px;
border: solid 1px #978257;
margin-bottom: 1.5em;
color: black;
cursor: pointer;
transition: background 0.3s ease-in-out;
font-weight: 600;
}
#rightside form input[type="submit"]:hover {
background: #b6985a;
color: #fff;
}
When the user focuses on either text field, the font-awesome icon pertaining to that input field should change color. Any help would be great! Thanks! CSS only would be preferable, but a js would work too
I went ahead and made a codepen for you to show you the value of the following blog post:
https://css-tricks.com/snippets/jquery/highlight-related-label-when-input-in-focus/
Here's what it offers:
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
The above utilizes jQuery and it works well as a conceptual example.
http://codepen.io/MassDebates/pen/ZBaVJL
If you wanted to do something that leverages CSS's :focus then I would suggest you change your markup to allow something like a sibling (~), adjacent/following sibling (+) or even a descendant selector if you wrap your input in the label.
The key here is to associate your label's icon (<i>) with your input element.
You can play with :focus and :blur pseudo-classes
$(document).ready(function(){
$(".username").focus(function(){
$(".fa-user").css("color","red");
console.log("in");
}).blur(function() {
$(".fa-user").css("color","yellow");
console.log('out');
});
$(".password").focus(function(){
$(".fa-lock").css("color","red");
console.log("in");
}).blur(function() {
$(".fa-lock").css("color","yellow");
console.log('out');
});
});
https://jsfiddle.net/czs3sy0a/2/
I have created a pen that sets a highlighted class on the parent p, and colors the icon using this CSS:
p.highlighted .fa {color: red;}
And this JS:
$(function() {
$('input').focusin(function() {
$(this).parent().parent().addClass('highlighted');
});
$('input').focusout(function() {
$(this).parent().parent().removeClass('highlighted');
});
});
http://codepen.io/anon/pen/pNdqYP
Here is a pure css solution you can use. As we know we dont have any way to select parent element along with css but we can get the next sibling element with the '+' selector. So what i have done is placed the label containing the icon right after the input that will change it's color when focused using the css :focus pseudo element along with the '+' selector of css to get the icon in the label next to the input focused.
In order to set the positions correctly after moving the labels in front of the inputs. I changed the input and label css class from float:left to float:right. This aligned them where label came before input and the width percentage i changed from 77% to 75% just to keep the responsiveness correct on smaller screens. Below is the sample code.
Sample Code: http://codepen.io/Nasir_T/pen/VmrgWw
Hope this helps you and any future coders who do not want work with a JS code solution.
First of all I have to say this seems an identical question with mine. But it isn't.
I have this HTML:
.parent{
border: 1px solid gray;
width: 70%;
}
.title{
border: 1px solid green;
}
.input {
/* width: fill_parent; */
}
<div class="parent">
<span class="title">title: </span>
<input class="input" name="title" type="text" placeholder="عنوان دقیقی انتخاب کنید">
</div>
All I need is setting a value which means something like fill_parent as that input's width. As you see, the width of that .parent is based on percentage, so it will be changed when the size of screen changes. That's why I cannot use a value based on px as .input's width.
Note: .input{width: 100%;} isn't what I'm looking for, because I need to keep both the title and input in the same line.
Any suggestion?
You can put display:flex; on your parent and then flex:1; on your input.
.parent{
border: 1px solid gray;
width: 70%;
display:flex;
}
.title{
border: 1px solid green;
}
.input {
flex:1;
}
<div class="parent">
<span class="title">title: </span>
<input class="input" name="title" type="text" placeholder="عنوان دقیقی انتخاب کنید">
</div>