Can anyone tell me why my pseudo selector is not working?
I thought it would be pretty straightforward..
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form id="registerForm" method="POST" action="register_post.php" >
<p class="registerSubmit">
<input id="submit" type="submit" name="submit" value="submit">
</p>
</form>
<style>
.registerSubmit #submit {
background: white;
}
.registerSubmit #submit :hover {
background: red;
}
<style>
</body>
</html>
Would appreciate it.. thanks.
see this code:
<style>
.registerSubmit #submit {
background: white;
}
.registerSubmit #submit:hover {
background: red;
}
<style>
See one more time:
.registerSubmit #submit:hover {
look one last time:
#submit:hover {
Are Achieve see the space?
Bye!
http://jsfiddle.net/NfYrj/
Apply :hover to submit only, not the entire form.
#submit:hover {
background: red;
}
Related
The top part of my checkbox do not word anymore after resizing it and resetting materialize.
Here is sample code:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 0px;
}
</style>
</head>
<body>
<form action="">
<label><input type="checkbox" class="reset-checkbox" style="width:20px;height:20px;" checked="checked" name="firstCheck"/></label>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
Here is the jsfiddle for you to try to click the top part of the checkbox if you want:
https://jsfiddle.net/j4oxgmtc/
Any idea or solution?
Thank you!
Andreas responded to that question in a comment: Exclude materialize css for some specific checkbox
''This happens, because is an inline element. You can set display: inline-block for it to fix it.''
Here is the modified working code: https://jsfiddle.net/vL3fsqjb/2/
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 0px;
}
</style>
When I use <!DOCTYPE html> my textfield is larger (about 257px instead of 250px). Does anyone have any idea why this would be? I couldn't find anything online.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input type='text' style="width:250px">
<div style='width:250px;background-color:#00FF00'> </div>
</form>
</body>
</html>
Thanks in advance!
Try this one
.inp {
box-sizing:border-box;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input type='text' style="width:250px" class= "inp">
<div style='width:250px;background-color:#00FF00'> </div>
</form>
</body>
</html>
That is the browsers default styling, from chrome dev:
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
So border takes 2*2px and padding taking 2*1px equal to 256px
I have an anchor and a H1 with a span. When I click the span I show an alert, but the link is also opened and I don't want this happens, I only want to show the alert. Is there any way to do this with CSS (I can't not use jQuery for that)? Maybe z-index?. This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="_blank">
<h1>Title <span>Some text</span></h1>
</a>
<script>
$("span").click(function() {
alert("The span was clicked");
});
</script>
</body>
</html>
Here the fiddle: https://jsfiddle.net/b820m6uj/
IF you can't use jQuery, you can use vanilla javascript:
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="_blank">
<h1>Title <span>Some text</span></h1>
</a>
<script>
document.querySelectorAll('a').forEach(function (link) {
link.addEventListener('click', function (event) {
event.preventDefault();
alert("The span was clicked");
});
});
</script>
</body>
</html>
If you are already using jQuery change the span selector to a pass the event object and add event.preventDefault() within your block. See Demo 1.
Here's a way to use CSS but you need to change 2 things in HTML.
Ad an id to your <span> or <h1> (ex. <span id='tgt'>...`)
Next, change <a>nchor target to the id of the <span> (ex. <a href="whatever.com" target='tgt'>...`)
Last but not least, add this ruleset to your CSS:
#tgt:target {display:inline}
The pseudoclass is :target which when applied, as demonstrated above, will enable whatever ruleset on the selector it's assigned to when an <a>nchor is clicked (with all the preparations previously explained of course.) I assigned display:inline because span#tgt already is inline making the <a>nchor truly disabled and almost completely worthless yet clickable. See Demo 2. BTW added a second example in Demo 2 with JavaScript and it still functions fine.
Demo 1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="_blank">
<h1>Title <span>Some text</span></h1>
</a>
<script>
$("a").click(function(event) {
event.preventDefault();
alert("The span was clicked");
});
</script>
</body>
</html>
Demo 2
document.getElementById('tgt2').addEventListener('click', function(e) {
/* Once again this would be the best solution */
// e.preventDefault()
alert("Hey JavaScript/jQuery works still!")
}, false);
#tgt1:target {
display: inline
}
#tgt2:target {
display: inline
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="tgt1">
<h1 id='tgt1'>Title <span>:target with CSS only</span></h1>
</a>
<hr/>
<a href="https://stackoverflow.com/" target="tgt2">
<h1 id='tgt2'>Title <span>:target with JS alert()</span></h1>
</a>
</body>
</html>
You can attach a click handler to the a then test the e.target and see if it was the span, and if so, show the alert and use e.preventDefault() to disable the link.
$("a").on('click', function(e) {
span = $(this).find('h1 span')[0];
if (e.target == span) {
e.preventDefault();
alert("The span was clicked.");
}
});
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://stackoverflow.com/">
<h1>Title <span>Some text</span></h1>
</a>
I have the following html file:
<html>
<head>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />
</head>
<body>
<div>
<input type="text" />
<input type="email" />
<input class="button" id="clickme" type="submit" value="Click Me" />
</div>
</body>
</html>
There is a link in the head block pointing to a css file that is:
body {
background: gray
background-image: url(“../images/bg-body.jpg”);
}
input[type=”text”], input[type=”email”] {
border: none;
}
The background image loads but the two inputs still have a visible border. In both IE and Chrome. However, it works if I specify the style inline.
I am using Notepad++ to edit html and css. The ; wasn't a typo but shows another problem. If I specify both color and image, in IE the image shows but in Chrome it doesnt. Is there some priority at work here?
Update your CSS like below. Replace ” with "
body {
background: gray;
background-image: url("../images/bg-body.jpg");
}
input[type="text"], input[type="email"] {
border: none;
}
EDIT:
By the way it will work without the quotation mark also.
body {
background: gray;
background-image: url(../images/bg-body.jpg);
}
input[type=text], input[type=email] {
border: none;
}
What the hell is that? I found there is some problem with padding in chrome with this elements but even if set the padding to 0 in both (textarea and input) they are not "looking same" width in chrome. The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>WTF</title>
<style>
input {
width: 200px;
padding: 0px;
}
textarea {
width: 200px;
padding: 0px;
}
table {
background-color: blue;
}
</style>
</head>
<body>
<form>
<table>
<tr><td><input type="text" /></td></tr>
<tr><td><textarea></textarea></td></tr>
</table>
<form>
</body>
</html>
If you add border:0, it fixes itself in chrome. See fiddle: http://jsfiddle.net/Q96yN/2/