i have a textbox and i want to insert span inside it . and i want to it is center in vertical all the time but my problem is it isn't center in some devices i tested it it with percent values but it doesn't work.
clearBtn {
position: relative;
left: 74px;
transition: left 0.3s;
font-size: 20px !important;
font-family: "B Nazanin" !important;
top:50%
}
<span id="clearBtn1" class="clearBtn">09</span>
<input type="tel" id="PhoneField" class="phoneBox" maxlength="9"/>
.
Here is an example which may help you:
Try to change the width of div to see, it is always centerd.
div {
position: relative;
width:200px
}
.phoneBox{
display:block;
width:100%;
}
.clearBtn {
position: absolute;
left:calc(50% - 8px);
font-size: 20px !important;
font-family: "B Nazanin" !important;
}
<div>
<span id="clearBtn1" class="clearBtn">09</span>
<input type="tel" id="PhoneField" class="phoneBox" maxlength="9" />
</div>
Related
Is it possible to insert units inside an input element? Inside the <input> element is preferred, but outside is acceptable.
You can use something like this.
Outside box:
<input></input><span style="margin-left:10px;">lb</span>
Inside box:
<input style="padding-right:20px; text-align:right;" value="50"></input><span style="margin-left:-20px;">lb</span>
Fiddle
You can make use of bootstrap input-group component.
Note: The example below uses bootstrap 4 classes
<div class="input-group">
<input type="number" class="form-control">
<div class="input-group-append">
<span class="input-group-text"> m </span>
</div>
</div>
Here is the result below:
I would do this by nudging an extra element (like a span) over the input using position: relative and left: -20px.
Then some padding-right on the input element to ensure that the user's input wont overlap on the new element.
Example here:
https://jsfiddle.net/peg3mdsg/1/
If you want the units to show up right beside the number, you can try this trick (https://jsfiddle.net/ccallendar/5f8wzc3t/24/). The input value is rendered in a div that is positioned on top of the input, with the value part hidden. That way the units are positioned correctly. Just make sure to use the identical styles (font sizes, colors, padding etc).
const input = document.getElementById("input");
const hiddenValue = document.getElementById("hiddenValue");
const unitsValue = document.getElementById("unitsValue");
input.addEventListener("input", () => {
hiddenValue.innerHTML = input.value;
// Only show units when there is a value?
// unitsValue.innerHTML = (input.value.length > 0 ? " km" : "");
});
.wrapper {
position: relative;
width: 80px;
}
#input {
border: 2px solid #fee400;
background-color: #373637;
width: 100%;
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
padding: 3px 3px 3px 10px;
color: white;
}
.units {
position: absolute;
top: 0;
left: 0;
right: 10px;
bottom: 0;
pointer-events: none;
overflow: hidden;
display: flex;
/* Match input styles */
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
/* includes border width */
padding: 5px 5px 5px 12px;
color: white;
opacity: 0.8;
}
.invisible {
visibility: hidden;
}
#unitsValue {
/* Support spaces */
white-space: pre;
}
<div class="wrapper">
<input id="input"type="number" value="12" />
<div class="units">
<span class="invisible" id="hiddenValue">12</span>
<span class="units-value" id="unitsValue"> km</span>
</div>
</div>
Since you are using bootstrap, you can use input-groups component and override some of the bootstrap styling :
HTML
<div class="input-group unity-input">
<input type="text" class="form-control" placeholder="Enter unity value" aria-describedby="basic-addon2" /> <span class="input-group-addon" id="basic-addon2">
lbs
</span>
</div>
CSS
.input-group {
top:40px;
width:auto;
}
.unity-input .form-control {
border-right:0!important;
}
.unity-input .input-group-addon {
background:white!important;
border-left:none!important;
font-weight:bold;
color:#333;
}
Fiddle
Here: (numbers are arbitrary and you can play around with those, what's important is to float the input and the negative margin on the span holding the measurement unit)
CSS:
#form>span {
display: inline-block;
padding-top: 5px;
margin-left: -16px;
}
#form>input {
padding: 5px 16px 5px 5px;
float:left;
}
HTML:
<div id="form">
<span class="units">lb</span>
<input type="text" placeholder="Value" />
</div>
JSFiddle DEMO
The problem I have found with all of the previous answers is that, if you change the length of the units (for example, "€/month" instead of "lb") the <span> element won't be correctly aligned.
I found a better answer in another post, and it's really simple:
Html
<div class="wrapper">
<input></input>
<span class="units">lb</span>
</div>
CSS
.wrapper{
position: relative;
}
.units {
position: absolute;
right: 14px (or the px that fit with your design);
}
This way, you can even put a long unit such as "€/month" and it will still be correctly positioned.
using bootstrap:
<label for="idinput">LABEL</label>
<div class="input-group mb-3">
<input class="form-control" name="idinput" type="text" pattern="(-?[0-9]+(\.[0-9]+)?)" [(ngModel)]="input"/>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">m3/s</span>
</div>
</div>
The only thing you can try with strictly css and html is placeholder and text align left. with jquery you could you the .addClass command.
http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/1/
input {
text-align:right;
}
Here's what I currently have:
<input type="text" name="amount" style="height:40px;width:200px;font-size:23px;text-align:center;" value="${$amount}" />
This is the part I'm specifically talking about:
value="${$amount}"
By default that shows $10.00 which is what I want. However, I don't want users to be able to edit the $ symbol. It should always remain there AND I don't want the dollar symbol submitted with the form. It's simply there for appearance so that users know the currency.
You can put the dollar sign as a background image for the input and leave some padding-left so that the text doesn't go over the background image.
You could use a pseudo element.
DEMO
<label>Label</label>
<span><input type="text" placeholder="Placeholder"></span>
input {
padding: 10px;
padding-left: 15px;
margin-left: 10px;
}
span:before {
content: "$";
position: relative;
left:10px;
margin-right: -15px;
}
Requires a wrapper element around your input as you cant generate a pseudo element on an input
Your best option is to put the sign outside the input element.
Try this: http://jsfiddle.net/mgmBE/45/
HTML:
<div class="input-container">
<input type="text" value="amount" name="" />
<span class="unit">$</span>
</div>
CSS:
.input-container {
position: relative;
width: 100px;
}
.input-container input {
width: 100%;
}
.input-container .unit {
position: absolute;
top: 3px;
right: -3px;
background-color: grey;
color: #ffffff;
padding-left: 5px;
width:20px;
}
Pseudo Element is the best option as very easy to place.
<label>Input:</label><span><input type="text" placeholder="Placeholder"></span>
CSS
input {
padding: 10px;
margin-left:15px;
}
span:before {
content: "$";
margin-right:-15px;
position: relative;
left:10px;
}
I want to set that in put textbox's location on initial condition header div. But that textbox is getting hidden under initial condition div.
Are there any alternative to z-index. I have attached my css also.
HTML:
<div id="initialCondHdr" class="initialCondHdr">Demo Experiment</div>
<div id="archiveTable_filter" class="dataTables_filter">
<label>
<input type="text" placeholder="Search" style="width:220px;height:30px;" />
</label>
</div>
CSS:
#initialCondHdr {
color:#043751;
font-family:calibri;
font-size:19px;
line-height:42px;
position:relative;
text-indent:15px;
}
.dataTables_filter {
float: left;
left: 119px;
margin: 12px 0 22px 12px;
overflow: hidden;
position: absolute;
text-align: right;
top: -20px;
z-index: 5;
}
It's not entirely clear to me what you are trying to do but I think you are trying to lay the input on top of the first div.
That being the case, you will have to change the HTML structure and adjust the positioning of your input as follows:
JSfiddle Demo
Revised HTML
<div id="initialCondHdr" class="initialCondHdr">Demo Experiment
<div id="archiveTable_filter" class="dataTables_filter">
<label>
<input type="text" placeholder="Search" style="width:220px;height:30px;"/>
</label>
</div>
</div>
Revised CSS
#initialCondHdr{
color:#043751;
font-family:calibri;
font-size:19px;
line-height:42px;
position:relative;
text-indent:15px;
color:red; /* visual reference only */
}
.dataTables_filter{
overflow: hidden;
position: absolute;
opacity:0.5; /* visual reference only */
top:0;
text-align: right;
z-index: 1;
}
I want to create an error box for a form like the one below.
I already themed the input box and am using jQuery validation to display errors. However I can't get that error box right. I think I'll need to put that together with three tags, but I don't know what tags to use (jQuery validation uses a label tag to display the error).
My current code for the error is:
<label for="email">
<span>Email:</span>
<input type="text" id="email" name="email" class="error">
<label for="email" class="error" style="">Az e-mail címet kötelező megadni</label>
</label>
I must make this IE7 compatible.
I made the following changes:
<div class="dataline">
<div class="label">Label:</div>
<div class="field"><input type="text" id="name" name="name" /></div>
<div class="arrow"></div>
<label class="error">Error text</label>
<div class="ender"></div>
</div>
I set the arrowhead as an image for the class arrow so now it looks perfect. Basicly I used 4 left floated block elements (label, input, arrowhead and bubble body). Now I only have two problems: the arrowhead is displayed even when there's no error. How can I hide it when the label is not after it? My other problem is that the container div is 800px wide and if the error text is long, it wraps around to the next line. How can I avoid it?
My css is:
div.dataline {
margin: 10px 0 0 0;
white-space: nowrap;
width: 3000px;
owerflow: visible;
height: 60px;
}
div.field {
float: left;
}
div.label {
float: left;
width: 120px;
margin: 20px 0 0 0;
}
div.arrow {
background-image: url('gfx/redarrow.png');
margin: 7px 0 0 10px;
background-repeat: no-repeat;
width: 20px;
height: 45px;
float: left;
}
div.ender {
background-image: url('gfx/bubbleend.png');
margin: 7px 0 0 0px;
background-repeat: no-repeat;
width: 3px;
height: 45px;
float: left;
}
label.error {
height: 27px;
background-image: url('gfx/bubblemiddle.png');
float: left;
padding: 9px;
margin: 7px 0 0 0;
}
the following fiddle is a good start for your implementation:
http://jsbin.com/aReQUgay/1/edit
#email.error
{
border-color: red;
}
#email.error + label
{
background-color: red;
}
Is there any way to increase the size of checkbox in HTML?
One way I changed the checkbox size is by scaling it with CSS:
input[type=checkbox] {
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
padding: 10px;
}
Not in an easy cross browser way.
You would get the most flexibility replacing it with a control that utilises JavaScript and CSS. Use a standard checkbox as a fallback.
These days, with the :checked pseudo selector, you can make a label element to do it as well.
This works for me.
<input type="checkbox" id="check" onclick="checked()" style="width:20px;height:20px;"/>
No. Most browsers ignore the width or height CSS styling of a checkbox. There are two ways around that:
Use a label tag so that clicking some other element also triggers the textbox.
Make your own checkbox using Javascript, by switching an image and filling a hidden input box.
A trick for increasing size of HTML checkbox is increase zoom property of input.
It is cross browser compatible and also it will adjust the size according to resolution of device.
.daysCheckbox1{
zoom:1;
}
.daysCheckbox2{
zoom:1.5;
}
.daysCheckbox3{
zoom:2;
}
.daysCheckbox4{
zoom:2.5;
}
<label> Checkbox 1<input type="checkbox" class="daysCheckbox1" name="Monday"></label><Br>
<label> Checkbox 2<input type="checkbox" class="daysCheckbox2" name="Monday"></label><Br>
<label> Checkbox 3<input type="checkbox" class="daysCheckbox3" name="Monday"></label><Br>
<label> Checkbox 4<input type="checkbox" class="daysCheckbox4" name="Monday"></label><Br>
I searched a lot and finally i created a custom checkbox.Code is
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".CheckBoxClass").change(function(){
if($(this).is(":checked")){
$(this).next("label").addClass("LabelSelected");
}else{
$(this).next("label").removeClass("LabelSelected");
}
});
});
</script>
Style is
.CheckBoxLabelClass{
background: url("uncheck222.png") no-repeat;
padding-left: 5px;
padding-top: 3px;
padding-right: 10px;
margin: 5px;
height: 60px;
width: 60px;
display: block;
}
.CheckBoxLabelClass:hover{
text-decoration: underline;
}
.LabelSelected{
background: url("check1111.png") no-repeat;
padding-left: 5px;
padding-top: 3px;
padding-right: 10px;
margin: 5px;
height: 60px;
width: 60px;
display: block;
}
checkbox code is:
<input id="CheckBox1" type="checkbox" class="CheckBoxClass"/>
<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass"></label>
One way to do this is to put the checkbox item inside the div element, change the div element size using px.
Now set the height and width of the checkbox item to 100% of the div element.
<style>
*Reset*
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*Changing the height of the body for better view*
body {
height: 1000px;
}
*Increasing the height and width of the div element*
div {
width: 100px;
height: 100px;
background-color: brown;
margin: auto;
margin-top: 100px;
}
*setting the height and width of the input to 100% of the div element*
input {
height: 100%;
width: 100%;
}
</style>
<body>
<div>
<input type="checkbox" name="" id="">
</div>
</body>
try this one:
input[type="checkbox"]{
cursor: pointer;
width: 50px; /*Desired width*/
height: 50px; /*Desired height*/
-webkit-appearance: none;
appearance: none;
}
OR
.CbxSizer {
zoom: 8;
transform: scale(4);
-ms-transform: scale(4);
-webkit-transform: scale(4);
-o-transform: scale(4);
-moz-transform: scale(4);
transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-moz-transform-origin: 0 0;
}
<div class="CbxSizer">
<input type="checkbox" name="hello" value="1">
</div>
OR
input[type='checkbox'] {
-webkit-appearance:none;
width:40px;
height:40px;
background:white;
border-radius:6px;
border:3px solid #445;
}
input[type='checkbox']:checked {
background: #abd;
}
<input type="checkbox" />
U can create a custom checkbox with 2 images switching with each other on tou
Set the font-size of the checkbox to something like 5em. Worked for me.