I have a problem with styling my radio input if :checked with selectivizr. Can you please help me how to make it work with selectivizr. If there is another method how to do it please wirte below. here is link to my site: test_radio_buttons and below is my CSS and HTML code ? Thank you all for your time and effort.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="checked-polyfill.js"></script>
<script>
$( document ).ready(function(){
$('input:radio').checkedPolyfill();
});
</script>
<link href="style.css" rel="stylesheet" />
<title>Radio</title>
</head>
<body>
<form>
<input type="radio" id="musi_se_jmenovat_stejne1" name="address" />
<label for="musi_se_jmenovat_stejne1"></label>
<input type="radio" id="musi_se_jmenovat_stejne2" name="address" />
<label for="musi_se_jmenovat_stejne2"></label>
</form>
</body>
</html>
CSS:
input[type="radio"]{
display:none;
}
input[type="radio"] + label
{
background: url('radio_un.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type="radio"]:checked + label
{
background: url('radio_in.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type="radio"].checked + label{
background: url('radio_in.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
Poly-fills like this one here: https://github.com/rdebeasi/checked-polyfill did work for me.
It adds a checked class in IE8 when the onchange event is triggered on the label.
I do remember to have had an issue with selectivizr and making this work.
See the fiddle here: http://fiddle.jshell.net/5a7Gj/15/Tested in IE8 on browser stack and it does not work with selectivr. It does not add any checked class.
input[type="radio"]:checked + label
{
background: url('radio_in.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type="radio"].checked
{
background: url('radio_in.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
Related
I've been learning web development for about a month now and I recently got stuck on something. I was making a simple login page as practice but when I try to make the input fields bigger, it doesn't do anything. This is my HTML and CSS code:
<!DOCTYPE html>
<html lang="en_US">
<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Isaac Guillen">
<!-- Link CSS -->
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<!-- Website Title -->
<title>My Website</title>
</head>
<body>
<section id="Login-Box">
<h1 class="login-txt">Login</h1>
<div class="usrname-input">
<input type="text" placeholder="Username">
</div>
<div class="passwd-input">
<input type="password" placeholder="Password">
</div>
<div class="submit-button">
<input type="button" value="Submit">
</div>
</section>
</body>
</html>
*{
margin: 0;
padding: 0;
color: black;
font-family: "Fira Code";
}
.login-txt{
font-size: 60px;
position: relative;
left: 1400px;
top: 150px;
}
.usrname-txt{
font-size: 40pt;
}
Can anyone help me? I don't know if I did anything wrong.
Your problem is that you changed only the size of a different element not a textarea.
You can correct it by adding a class to both textareas and than changing their width and height.
Just like this:
<!DOCTYPE html>
<html lang="en_US">
<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Isaac Guillen">
<!-- Link CSS -->
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<!-- Website Title -->
<title>My Website</title>
</head>
<body>
<section id="Login-Box">
<h1 class="login-txt">Login</h1>
<div class="usrname-input">
<input type="text" placeholder="Username" class="username-area">
</div>
<div class="passwd-input">
<input type="password" placeholder="Password" class="password-area">
</div>
<div class="submit-button">
<input type="button" value="Submit">
</div>
</section>
</body>
</html>
Plus CSS:
*{
margin: 0;
padding: 0;
color: black;
font-family: "Fira Code";
}
.login-txt{
font-size: 60px;
position: relative;
left: 1400px;
top: 150px;
}
.usrname-txt{
font-size: 40pt;
}
.username-area{
width: 30%;
height: 40px;
}
.password-area{
width: 30%;
height: 40px;
}
You are using a wrong class selector, try this css:
*{
margin: 0;
padding: 0;
color: black;
font-family: "Fira Code";
}
input{
font-size: inherit; /*Takes parent element's font size*/
}
.login-txt{
font-size: 60px;
position: relative;
left: 1400px;
top: 150px;
}
.usrname-input{ /*usrname-txt does not exists*/
font-size: 40pt;
}
Demo: https://jsfiddle.net/pjm5b4d0/2/
You have to select the input fields using a class or an id.
Here is a quick example:
input {
font-size: 3rem;
padding: 1rem;
margin-bottom: .5rem;
}
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>
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 need to allign element under RED arrow right under the element where BLACK arrow is pointed at. In other words how do i allign element close enough to input like 2-5px.
http://i.stack.imgur.com/Q4IeX.png
code is here
CSS
form.loginform
{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 16px;
border-radius: 10px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
div.divbg
{
width: 200px;
height: 167px;
position: fixed;
text-align: center;
vertical-align: middle;
margin-top: 30%;
margin-left: 40%;
background-color: aliceblue;
}
a.register
{
font-family: Geneva,Arial,Helvetica,sans-serif;
font-size: 11px;
}
#pass
{
float: inherit;
margin: 0;
}
HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel=StyleSheet href="loginstyle.css" type="text/css" media="screen"/>
</head>
<body>
<div class="divbg">
<form method="post" class="loginform">
Логин <div class="center"><input type="text" name="login"/></div><br/>
<div id="pass">Пароль <div class="center"><input type="text" name="password"/></div><br/>
хочу зарегистрироваться!<br/></div>
<input type="submit" name="submit" value="Войти"/><br/>
</form>
</div>
</body>
</html>
1 Get a modern browser
2 Install firebug or use developers tools
3 check if the last input box (black arrow) has some margin-bottom or padding-bottom.
4 If yes, set it to 0 or a negative value
5 if No, check if the element with the red arrow has margin-top, and remove it or set a negative margin-top value.
Without code, It's not so easy to help you
You have a <br /> tag after the #center div. That is what is pushing it down. You also have some padding around the input tag; both of those issues are what is causing that space.
Your code:
<div class="center"><input type="text" name="password"/></div><br/>
Remove that <br />
On a page that I'm designing I have a form with one input of type text. Normally, this form and input render properly in my browser, Chrome, but occasionally, it renders about 20 pixels to the left of where it is supposed to be. When I refresh the page, it goes back to the original, correct place.
I have only tested in Chrome so far, so this isn't a cross-browser issue (it happens in the same browser). Is there anything wrong with my code below?
Here's my HTML code:
<!DOCTYPE htmls>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Test Site</title>
</head>
<body >
<div id="supercontainer" class="style1">
<img class="floater" src="top.jpg" alt="Top" />
<img class="floater" src="left.jpg" alt="Left" />
<div id="content">
<p id="theText">
Welcome. Please type a username.
</p>
<form id="prompt">
<div><input type="text" name="promptLine" autocomplete="off" id="promptLine" onkeypress="return submitenter(event);" value="% " /></div>
</form>
</div>
<img class="floater" src="right.jpg" alt="Right" />
<img class="floater" src="bottom.jpg" alt="Bottom" />
</div>
Here's my CSS code:
#supercontainer {
margin: 0 auto;
width: 900px;
display: block;
}
img.floater {
display: inline;
float: left;
}
#content {
background-color:black;
display: inline;
float: left;
padding-left:5px;
padding-right:5px;
min-height:458px;
max-height:458px;
min-width: 803px;
max-width: 803px;
color: lime;
}
#theText {
text-align:left;
margin-bottom:0;
margin-top:0;
line-height: 0.3;
font-family:"Courier New", Courier, monospace;
}
#prompt {
position: fixed;
top: 470px;
}
#promptLine {
width: 100%;
background-color: black;
color: lime;
border: none;
outline:none;
}
Try closing your BODY and HTML tags? Also, doctype "htmls"?