I set the border width of these input boxes to 1px. However, for some reason on ios, the top border looks bigger than it should be ( regardless of browser ).
On any other kind of device, the border looks fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1">
<title>ios rendering test</title>
</head>
<body>
<style media="screen">
input {
border: 1px solid #ccc;
height: 100px;
margin: 5%;
}
</style>
<form class="" action="index.html" method="post">
<input type="text" name="" value="firstname">
<input type="text" name="" value="lastname">
<input type="text" name="" value="email">
<input type="submit" name="submit" value="subscribe">
</form>
</body>
</html>
Since it's an iOS input being targeted, you'll need to remove the default styles using -webkit-appearance: none;
Your Code
input {
-webkit-appearance: none; /* Add this */
border: 1px solid #ccc;
height: 100px;
margin: 5%;
}
Here is an article with more information about the appearance tags.
Related
Basiaclly, I am trying to make a upload form for my website. I was wondering if there is any CSS that would make this look much more pleasing and unique. The code below is only HTML. I only need the CSS but if you find any way to improve the HTML, let me know.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<label for="file">Choose a file:</label>
<input type="file" name="file1"/>
<input type="submit" value="send!"/>
</form>
</body>
</html>
One way you could improve is change the <input type="submit" value="send!"/> code to <button id="" class="" type="submit">Your Text Here</button>. Also for css codes for like buttons I reccomend use something like this
ButtonIDHere {
border-radius: 25px;
border: 4px solid blue;
padding: 10px;
}
and to make inputs a little nicer use something like this
.InputClass {
position: absolute;
width: 150px;
top: 150px;
left: 730px;
z-index: 4;
}
Also maybe change the border color and stuff.
yo so what do you actually wanna see I just made the form centred and added some colour.
do u want the buttons to look nicer?
https://jsfiddle.net/jqc05Ldk/5/
.container{
width: 50%;
margin: 0 auto;
padding: 24px 24px;
background-color: #57b3e4;
height: auto;
color: #BBDEF0;
border-radius: 25px;
}
input[type="submit"]{
border-radius: 25px;
border: 4px #00A6A6 solid;
background-color: #00A6A6;
color:#BBDEF0;
cursor:pointer;
}
input[type="submit"]:hover{
color: #00A6A6;
background-color: #BBDEF0;
}
For these type of file inputs you can use form control in bootstrap which does not include the external css that much because bootstrap is a css framework and the button styling also will be nice when we use bootstrap Try this code.This code also includes the alert that comes after send button.Try doing these type of forms with bootstrap
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<style>
.container{
width: 300px;
height: 150px;
border: 1px solid black;
border-radius: 25px;
}
</style>
<script type="text/javascript">
function showMessage(){
alert("Thanks Your papers have been evaluated");
}
</script>
</head>
<body>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<div class="container mt-4 mb-2">
<form>
<div class="form-group mt-2">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
<button type="submit" onclick = "showMessage()"class="btn btn-primary mt-2">send </button>
</div>
</form>
I'm just trying to have a label and text box fill the width of a form. I can't believe how much time I've wasted on this simple problem. This would have been SO simple with tables.
Here's the simple HTML:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
* { box-sizing: border-box; }
</style>
</head>
<body>
<form style="width: 500px; border-style:solid; border-color: red;">
<label for="Txt">Label:</label>
<input id="Txt" type="text" style="width: auto;" />
</form>
</body>
</html>
And here's how it looks:
All I want is for my text box to fill the rest of the form (the empty area to the right of the text box. I've tried 100%, display:table etc. I want to solve it with HTML and CSS only (no JavaScript or jQuery), and without having to play around with pixel counts or percentages until it looks right.
Thanks in advance.
Here is my solution
Use width: calc(100% - 82px); for the input width
The 82px is equal to width of the label and (1px border * 2) of the input
* {
box-sizing: border-box;
}
label {
width: 80px;
display: inline-block;
}
input {
display: inline-block;
width: calc(100% - 82px);
border: 1px solid #ccc;
font-size: 16px;
}
<form class="back">
<label>Test Label</label><input type="text" name="search" class="">
</form>
You could use the grid layout by defining the grid template.
Here is the link to Mozilla Docs for CSS Grid.
* { box-sizing: border-box; }
.form {
width: 500px;
border-style:solid;
border-color: red;
display: grid;
grid-template-columns: min-content auto;
}
<form class="form">
<label for="Txt">Label:</label>
<input id="Txt" type="text" />
</form>
You should be use this simple way.
Please try: width: calc(100% - 45px) !important; into input#Txt class.
Hope this help.
Let me know further clarification.
input#Txt {
width: calc(100% - 45px) !important;
}
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
* { box-sizing: border-box; }
</style>
</head>
<body>
<form style="width: 500px; border-style:solid; border-color: red;">
<label for="Txt">Label:</label>
<input id="Txt" type="text" style="width: auto;" />
</form>
</body>
</html>
Flexbox approach:
form {
display: flex;
}
input {
flex: 1;
}
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<form style="width: 500px; border-style:solid; border-color: red;">
<label for="Txt">Label:</label>
<input id="Txt" type="text" style="width: auto;" />
</form>
</body>
</html>
Using browser-safe CSS rules, you can set width for label and input, then set them to display: inline-block, this way.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
label {
display: inline-block;
width: 10%;
}
input {
display: inline-block;
width: 88%;
}
</style>
</head>
<body>
<form style="width: 500px; border-style:solid; border-color: red;">
<label for="Txt">Label:</label>
<input id="Txt" type="text" />
</form>
</body>
</html>
My web page loads with no styling on the inputs. When I put the styling inside the HTML file it displays correctly. I tried adding it before and after the scripts however nothing is working. I don't want to put the styling inside the same file.
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Article Review</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="home.js"></script>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="background-image"></div>
<div id="container">
<form method="POST" id="form">
<input type="text" autocomplete="First" id="firstname" placeholder="First Name: " />
<input type="text" id="lastname" autocomplete="Last" placeholder="Last Name: " />
<input type="text" id="user" autocomplete="User" placeholder="Username: " />
<input type="password" id="pass" placeholder="Password: " />
<input type="email" autocomplete="Email" id="email" placeholder="Email: " />
<button type="submit" name="submit" id="submit">Submit</button>
</form>
</div>
</body>
</html>
Next here is my CSS:
#background-image {
background-image: url("images/bg.jpg");
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
This is likely due to the location of your CSS relative to your HTML document, on your server.
Try relocating your index.css file to the root directory of your web server, and then make the following change to your HTML:
<!-- Add / infront of index.css, and close your link tag with /> -->
<link href="/index.css" rel="stylesheet" type="text/css" />
It is working for me using chrome.
Make sure the index.css is in the same folder as your html file
You could also try:
<link href="./index.css" rel="stylesheet" type="text/css">
index.css, index.html must be on the same directory.
If you still have the same issue.
I suggested you to hard reload your page (Ctrl+Shift+R).
I'm trying to make a simple form that asks for login details, but I want it to also be mobile friendly. It works great with desktops, but on mobiles it shifts a little bit to the right. I want the text to be exactly in the middle, like on pc.
Pic of the site on mobile:
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Teretulemast</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="display:block; padding: 0; width: 80%; margin-left: 40%; overflow:hidden; position: relative;">
<form>
<h1 style="">Sisse logimine</h1><br />
<p style="">Kasutajanimi: </p><input style="height: 25px;"type="text" name="username"/>
<p style="">Parool: </p><input style="height: 25px;" type="password" name="password"/><br />
<input style="" type="submit" value="Logi sisse" name="Sisesta"/>
<input type="submit" value="Tagasi" name="back"/>
</form>
</body>
</html>
Learn more about flex box: https://www.w3schools.com/css/css3_flexbox.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Teretulemast</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="display:flex; padding: 0; width: 100%; overflow:hidden; align-items: center; justify-content: center">
<form>
<h1 style="">Sisse logimine</h1><br />
<p style="">Kasutajanimi: </p><input style="height: 25px;"type="text" name="username"/>
<p style="">Parool: </p><input style="height: 25px;" type="password" name="password"/><br />
<input style="" type="submit" value="Logi sisse" name="Sisesta"/>
<input type="submit" value="Tagasi" name="back"/>
</form>
</body>
</html>
Try these css styles on the form
form{
margin-left:auto;
margin-right: auto;
width: 200px;
padding:30px;
border:1px solid grey;
left:0;
right:0;
}
One method is to set the <form> to display:inline-block and set text-align:center on its container. That ensures that the form's content dictates it's width and that it's always horizontally centered on the page.
body {
text-align: center;
}
form {
display: inline-block;
text-align: left;
background-color: #EEE;
padding: 1em;
}
h1 {
margin: 0 0 .2em;
}
label {
display: block;
margin: 0 0 1em;
}
input[type="text"],
input[type="password"] {
height: 25px;
}
<form>
<h1>Sisse logimine</h1><br />
<label>Kasutajanimi:<br><input type="text" name="username"></label>
<label>Parool:<br><input type="password" name="password"></label>
<input type="submit" value="Logi sisse" name="Sisesta">
<input type="submit" value="Tagasi" name="back">
</form>
I have this :
<form method="post" accept-charset="UTF-8" action="#" style="margin-left:130px;">
<input type="text" style="color:black;height:150px;width:325px;line-height: normal !important;display:block;" >
</form>
very simple.
The text is in the mdll if the input , and i want the text will apear on top.
line-height: normal !important; not working.
Its working good at IE , but in firefox and chrome the text apears in the middle of the input.
What can i do ?
Whenever you want more space, use the <textarea> tag instead of the <input type="text"> tag.
Use Internal or external css because it is a very bad idea to use css rules in internal for multiple same type tags.
Check it how to use it
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
textarea{
-moz-box-sizing: border-box;
font-size: 0.857143rem;
line-height: 1.71429;
padding: 0.714286rem;
width: 325px;
height:150px;
}
</style>
</head>
<body>
<form method="post" accept-charset="UTF-8" action="#" style="margin-left:130px;">
<textarea id="comment" aria-required="true" rows="8" cols="45" name="comment"></textarea>
</form>
</body>
</html>
HTML:
<input type="text" class="input-lg"/>
css:
.input-lg {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}