Chrome seems to not like having an overflow on certain input fields, it causes some very strange results. Use the following code to replicate. I don't understand why there is an offset.
<!doctype>
<html>
<head>
<title>Test</title>
<style type="text/css">
input {
overflow: hidden;
}
</style>
</head>
<body>
<input type="text" />
<select><option>Hello</option></select>
<input type="submit" value="Ok..." />
</body>
</html>
Related
In the code below, I set the max-width of the 1st image to be min(40px, 10%), but apparently it doesn't work. Firefox says “Invalid property value”. Why is that?
img#test1
{
max-width: min(40px, 10%);
}
img#test2
{
max-width: 10%;
}
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
<img id="test1" src="https://i.imgur.com/JfmBtYb.png" />
</div>
<div>
<img id="test2" src="https://i.imgur.com/JfmBtYb.png" />
</div>
</body>
</html>
Your problem has to do with browser compatibility for min(). It's not yet widely adopted, even the https://developer.mozilla.org/en-US/docs/Web/CSS/min DOC shows that compatibility is unknown for many browsers.
Seems to work fine in Opera and Chrome but the same code in FF and IE11 hides the text, which is no fun at all. I don't have a Mac so I don't know what it's like in Safari.
Here is a plunker demonstrating the issue.
I've tried adding line-height and overflow:visiblebut neither seem to have much effect.
css:
#userResponse {
font-size: 2em;
padding: 1em 0.25em;
text-align: center;
}
html:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<input class="form-control" id="userResponse" type="text">
</body>
</html>
Bootstrap also has classes for input tags to increase the height of text fields, try with input-lg, hope it meets your requirement
<input class="form-control input-lg" type="text">
remember to put all form-control inside form-group
<div class="form-group">
<input class="form-control input-lg" type="text">
</div>
for more http://getbootstrap.com/css/#forms-control-sizes
Luzan's solution is probably the best approach. However, to keep the the spacing similar to how it appears in chrome with the padding I gave it a new fixed height of 58px and removed the padding entirely. This seems to give consistent results across all four browsers.
Updated Plunker.
html:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<input class="form-control" id="userResponse" type="text" value='abcdefghijklmnopqrstuvwqyz'>
<div class="form-group">
<input class="form-control custom" type="text" value='abcdefghijklmnopqrstuvwqyz'>
</div>
</body>
</html>
css:
/* Styles go here */
#userResponse {
font-size: 2em;
padding: 1em 0.25em;
text-align: center;
}
.custom {
text-align:center;
font-size:2em;
height:58px;
}
I have one problem: I have simple HTML code and CSS code, but the CSS doesn't work... Please, can you told me, when I have something wrong?:
<html>
<head>
<link rel="icon" type="image/ico" href="http://eslgfx.net/nodelogo/lol_small.ico"/>
<title> LOL (fake :D) </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body link="#CDA221" vlink="lime" alink="#CDA221">
<body background=http://i.imgur.com/0TugbQI.png">
<h1> My page </h1>
<form name="form" method="post" action="file:///C:/Documents%20and%20Settings/Filip/Desktop/formular.html">
<br> Please, enter your personal data:<br>
Name: <input type="text" name="meno" maxlength="20"><br>
Password: <input type="password" name="password" maxlength="20"><br>
<input type="submit" name="Send" value="Odoslať">
<style type="css">
input[type="submit"] {
background: url(data:image/jpeg;base64,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);
width: 200px;
height: 50px;
border: 0;
}
<style>
</form>
</body>
</html>
The out put is:
I want to change "submit" button appearance. Please help.
You can use:
<style type="text/css">
instead of:
<style type="css">
Also, you just need one <body> tag and you're missing open " for background value:
<body background="http://i.imgur.com/0TugbQI.png"link="#CDA221" vlink="lime" alink="#CDA221">
<!-- ------------^ Missing " here -->
as well as closing your <style> tag using </style>
<style type="css"> is inconsistent across browsers!!
do it this way
<style media="screen" type="text/css">
/* css styles*/
</style>
or simply :
<style>
/* css styles*/
</style>
you haven't closed your <style> tag too!! :)
Merge the two tags to one
<body link="#CDA221" vlink="lime" alink="#CDA221" background=http://i.imgur.com/0TugbQI.png">
Use "text/css" instead of "css"
Put the <style> tag into the <head> tag.
My intention for the script below (and also located at http://jsbin.com/enOxEya/1/) is just to remove the right border.
For FF, Chrome and IE, however, it makes the left and top border bold.
Furthermore, for FF, it removes the bottom border, and for Chrome and IE, it shades the bottom border.
See images for each browser (all browsers are fairly up to date)
Results from FF
Results from Chrome
Results from IE
Using border style none to just the top, bottom, and left border also produces unexpected results for all browsers.
How do I just remove a single border (i.e. the right one) without effecting the other three borders?
<!DOCTYPE html>
<html>
<head>
<title>Boarders</title>
<style type='text/css'>
#input2 {border-right-style:none}
</style>
</head>
<body>
<input id="input1" />
<br />
<br />
<input id="input2" />
</body>
</html>
Try this,it works fine
just replace
<style type='text/css'>
#input2 {border-right-style:none}
</style>
with this
<style type='text/css'>
#input2 {border-style: solid none solid solid}
</style>
hope this helps you.
try this:
DEMO
<!DOCTYPE html>
<html>
<head>
<title>Boarders</title>
<style type='text/css'>
#input2 {
border: 1px solid #ABADB3;
border-right: 0;
}
</style>
</head>
<body>
<input id="input1" />
<br />
<br />
<input id="input2" />
</body>
</html>
I am a php programmer.
I am not able to decrease the size of a few text boxes in my html form, they are in the same .
Read these examples - http://www.w3schools.com/css/css_reference.asp#dimension
<html>
<head>
<style type="text/css">
input {height:100px; width:200px; }
</style>
</head>
<body>
<input type="text" />
</body>
In this case all html "input types" would have height 100x and width 200px. Instead if you use a "class" you style only those elements which are assigned that specific class.
<html>
<head>
<style type="text/css">
.tb {height:100px; width:200px; }
</style>
</head>
<body>
<input type="text" class="tb"/>
<br />
<input type="text" />
</body>
You can also use an "id" for that specific html element. Ids should be unique in an html page
<html>
<head>
<style type="text/css">
#tb {height:100px; width:200px; }
</style>
</head>
<body>
<input type="text" id="tb"/>
<br />
<input type="text" />
</body>
If you are using CSS, a simple width and height property work just fine.
textarea {height:100px; width:100px; }
You also can write this way,
<html>
<head>
<style type="text/css">
input[type=text] {height:50px;width:200px;}
</style>
</head>
<body>
<input type="text" />
</body>
You can also specify the rows and cols attributes of the textareas to control their size. Rows are the horizontal lines and cols is the number of characters wide you want the texarea to be
<textarea name="myText" rows="10" cols="80">Enter some text</textarea>
Provides a fairly short and wide textarea.