I am using box for token code purpose but input text alignment is coming different in different browser.
In Chrome:
In Internet Explorer:
My code for input text and for box is below:
<style>
input.box {
height: 9px;
padding: 3px 3px 8px;
border: 1px solid #999;
width: 145px;
padding-top: 4px;
}
</style>
<input path="token" id="token" tabindex="2" maxlength="35" class="box"
placeholder="token" />
we can see the bottom space is more in Chrome compare to Internet Explorer in the box.
Please let me know, how to fix this?
You can edit the CSS like this answer:
input.box {
height: 15px;
padding: 5px;
border: 1px solid #999;
width: 145px;
vertical-align: middle;
display: inline-block
}
<input path="token" id="token" tabindex="2" maxlength="35" class="box" placeholder="token" />
Since <input> Elements, or form elements in general, depending on the browser itself, it is up to the browser (and the operating system), how they look. So for example padding is supported by Chrome and Firefox on Windows, but the IE does not support it.
As a workaround, you could add a line-height, look at the example below:
input.box {
height: 9px;
padding: 3px 3px 8px;
border: 1px solid #999;
width: 145px;
padding-top: 4px;
line-height: 8px;
}
<input path="token" id="token" tabindex="2" maxlength="35" class="box"
placeholder="token" />
Assuming you mean you can use the line-height CSS property to do this. Simply set it to be the same as the height of the element.
Use line-height instead of padding for the IE.
Related
Hello I want to set the light gray outline outside gray border line just like in the following image.either there is a border position set or blur effect the input text.
Please tell me how can I fix this issue? I am doing all of this in css.
.container {
background-color: aquamarine;
width: 100%;
height: auto;
}
input[type="text"],
textarea,
textarea.form-control {
background-color: #efeeef;
width: 396px;
height: 48px;
border-radius: 4px;
border: 3px solid #cecece;
}
textarea.form-control {
line-height: 50%;
font-size: 16px;
color: red;
font-weight: 500;
}
<div class="container">
<!--Form element-->
<form>
<fieldset>
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control textarea border-color outline" id="form-email">
</fieldset>
</form>
</div>
When I am using shade effects it is also useless.Is there any way to set the position of the border in this input area.
Borders cannot be set to blur (at least directly). If you are using some sort of CSS library, say Bootstrap then it may be adding box-shadow to the input elements.
Setting the box-shadow: none; on the required input should solve the problem.
I am not a expert but try
form{
border: 1px(thickness) outset(type of border) grey(color)
}
for more information go to this link:
https://www.w3schools.com/css/css_border.asp
My code is working in Firefox but not looking good in Opera.
the height of input/text and input/submit is similar in firefox but in opera the input/submit height is reduced.
this is html code
<footer>
<div class="subsceibe">
<h3>Get Notefied</h3>
<br>
<form method="post">
<input type="email" name="email" placeholder="Enter E-Mail"><input type="submit" name="submit" value="Subscribe">
</form>
</div>
</footer>
this is css code
footer .subsceibe form input { border: 1px solid; padding: 6px 10px; outline: none; }
footer .subsceibe form input:last-child { color: #001001; background: #00A240; border: 1px solid #00A240; padding: 5px 10px; text-transform: uppercase; font-weight: bold; }
footer .subsceibe form input:last-child:hover { color: #00A240; background: #001001; }
Check this pen
.input {
height: 28px;
box-sizing: border-box;
}
Give specific height for both the input.
I added above properties and found its appearing same in both browsers.
Try to add the height parameter to the css.
For example: height: 20px; line-height: 20px;
On my website people somehow cannot write in the inputs when they use Safari. The problem is only present in safari.
(http://www.rootshybrid.dk/blivfrivillig/)
From other threads I've seen the solution being the user-select code. I have tried adding both webkit-user-select: auto; and webkit-user-select: text; to the css of the input fields, but it still doesn't work.
Anyone have a solution to my problem?
The combination input padding on line 40 of main.css
input, select, textarea {
border-radius: 6px;
border: 1px solid #d0d0d0;
outline: 0;
font-family: Roboto;
padding: 15px 10px; /*<<<<<<<*/
font-size: 15px;
webkit-user-select: auto;
}
Is not working with the height on line 55 and 80 of main.css
.whitebox input[type="text"] {
height: 20px;
}
Just add a hollow class to the <p> value
for example
<p class="abc">
<label class="stdlabel">Fornavn *</label>
<input type="text" name="firstname" value="">
</p>
Because it seems that the problem occurs for those input labels only
My fiddle pretty much shows the problem. Trying to get the labels to be on the left side of each text box if anyone could help. http://jsfiddle.net/HC64Y/
<div id="boxalign2" class="boxalign2" >
<label>Hospital*:</label><input class="rounded2" required title="Hospital is required!" name="MainHospital" type="text" />
<label>Title*:</label><input class="rounded2" name="MainTitle" type="text"/>
<label>Department*:</label> <input class="rounded2" name="MainDept" type="text"/>
</div>
css
input.rounded2 {
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 20px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
float: left;
display: inline-block;
clear: left;
width: 150px;
text-align: right;
}
You are making your inputs inline-block, but you are also floating them to the left.
If you remove the float: left and add <br> after each input, you will get the correct behavior.
http://jsfiddle.net/A8es3/
To align the boxes, add a div wrapper around each label/input, make your label inline-block with a fixed width. There are other ways to do this as well, but this is one way.
http://jsfiddle.net/A8es3/1/
As stolli mentioned, you can also simply use the label element as the wrapper:
http://jsfiddle.net/A8es3/2/
You can give to your div .boxalign2 and label fixed widths.
View the demo http://jsfiddle.net/HC64Y/11/
.boxalign2 {
width:400px;
}
label {
text-align:right;
padding-right:20px;
display:inline-block;
min-width:150px;
}
To ammend Jeff B's answer to get your result, simply give the elements a width in your css
label {width: 100px} where '100' is whatever value looks best for your layout.
Also, remember that the primary purpose of labels (as opposed to just div's or span's for labeling) is that labels act as a secondary click target for the control they are associated with. Therefore, you can wrap your elements in the label tag (<label><input /></label>) or associate them by id (<label for="foo"><input id="foo"/>) and give the user much more to click, simply by clicking the label, they can toggle the control, focus the text input, whatever. A big boon in usability for touch devices.
<!DOCTYPE html>
<html>
<head>
<title>Centering a form</title>
</head>
<body>
<div class="form">
<label>Name</label>
<input type="text" name="name">
<label>Email</label>
<input type="text" name="email">
<label>Phone</label>
<input type="text" name="phone">
</div>
</body>
</html>
<style type="text/css">
.form {
margin: 0 auto;
width: 210px;
}
.form label{
display: inline-block;
text-align: right;
float: left;
}
.form input{
display: inline-block;
text-align: left;
float: right;
}
</style>
Demo here: https://jsfiddle.net/durtpwvx/
Hi I want to change the style of the dropdown, nearer the option tags, in HTML. In Firefox it is working, but not properly in IE and google chrome.
The padding is only working in firefox. The background color is working on all browsers, but in IE you can see it, even on the selected value.
Demo with JSFiddle
Html:
<label for="locale">locale:<em>*</em></label>
<select name="locale" id="locale">
<option selected="selected">en_CA</option>
<option>en_US</option>
<option>fr_FR</option>
<option>fr_CA</option>
<option>ja_JP</option>
</select><br />
CSS:
label{
margin: 5px 0px 10px 0px;
padding: 5px;
height: 22px;
display: inline-block;
width: 100px;
}
label em{
color: red;
font-family: Arial;
font-weight: bold;
}
select{
color: #333;
margin: 5px 0px 10px -5px;
padding: 5px;
height: 32px;
width: 262px;
border: #999 1px solid;
}
select option {
padding: 5px 8px;
background: #ddd;
}
Webkit browsers (Safari, Chrome etc) don't allow padding on select elements. You can however mimic padding by manipulating the height for top and bottom padding and text-indent for left-padding.
Update: The same goes for background-color on option elements. Webkit doesn't allow that and I don't believe there's a workaround other than doing your own Javascript implementation of a drop-down using for example an unordered list and some styling.
I don't think you could just style the option tags. I think I read it from somewhere that it is based on OS or something...