I want a popup block to appear when I hover over the image as given in the picture below. How can I achieve this using css.
I have already used css to change the background on hover so how can I make the content appear.
I have been using wordpress but I couldn't find any plugin for the same.
Can anyone help with this one?
Sorry, but you can't do this with only CSS : you have to use JS for it (so if you have not learned it before, I think you should...)
CSS can apply properties on elements "selected" but only that.
If you want to get an information about an element (like whether it is hovered) and apply a propertie to another element depending on the information (like visibility:hidden), you have to use JavaScript.
Is there any way I can change the color of the datalist (black box appearing in the image)
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
EDIT: you might be seeing it as white, it takes the default color of system
Datalist has very few to no possibilities when it comes to design. There may be vendor specific styling, but I would not advice using them in production environments.
The best workaround is to repaint the whole datalist with JavaScript like awsomplete does it. -> https://leaverou.github.io/awesomplete/
You cannot style these elements like select and datalist it has very little flexibility in styling.
Browsers define their own styles to the elements I mentioned above.
Try to read this guide
I am trying to get rid of HTML validation completely. This question would help if I had all inputs inside some forms. But I don't, as with angularjs I only need a form if I want to know if all fields in some set are valid. Moreover, HTML form elements don't stack, so I'm using ng-form only.
I actually don't care if the form gets validated or not; I only want to get rid of the red border in Firefox just like in this question. Is there a way how to style the glowing red to zero size or transparency or whatever? In Firefox I can't see it.
Alternatively, is there a possibility to teach angularjs work with some other attribute name rather than required, so that HTML5 doesn't jump in to visually destroy my page?
You can use :
:invalid {
box-shadow: none;
}
:invalid
Migrating OP's solution from the question to an answer:
Actually, there's a simpler possibility: As I'm using no HTML forms at all and I need some top-level container anyway, it can be a <form novalidate> instead of a <div>. Too simple to be seen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<style>
form:focus{
background:red;
}
</style>
<title>Home, sweet home</title>
</head>
<body>
<form>
<input type="text"/>
<input type="submit"/>
</form>
<form>
<input type="text"/>
<input type="submit"/>
</form>
<form>
<input type="text"/>
<input type="submit"/>
</form>
</body>
</html>
This obviously doesn't work, as is why I'm asking the question. How can I get the form which has one if it's inputs as the focus to highlight? That is, I want to be able to apply styles to the active FORM, not the active INPUT - is that doable without JS or something?
This is an older question, but as of now, some of the more popular browsers are supporting a css pseudo selector called :focus-within, which can style a form (without javascript) that has a focused input.
Here is the current support for the selector: http://caniuse.com/#search=focus-within
If you're using a supported browser, here is an example: https://codepen.io/jumprope-design/pen/LjxORX
This code works as an exercise but probably not a solution you should use. The version relying on legend actually seems acceptable.
There is no form:focus selector so I thought instead the individual input:focus could create the desired effect using pseudo-elements. However, pseudo-elements can only be used on elements with content, like if I were to replace input[type=submit] with button
form {
position:relative;
}
/*style the pseudo-element before a button that is a general sibling
of any element that currently has focus within a form*/
form *:focus~button:before{
content:"";display:block;background:red;
/*take up the entire space of the form*/
position:absolute;top:0;right:0;bottom:0;left:0;
/*but render behind its children*/
z-index:-1;
}
Fiddled, but it instantly looked pretty crazy, so I've refactored the solution to rely onto a legend element. Enjoy :)
There is no parent selector in CSS so javascript is required. CSS 4 is planned to get this feature, however.
I've been looking for the same styling technique for a while. From a UI/UX standpoint - simplifying search forms to a single element makes a lot of sense in certain situations.
Consider the example below:
When you approach it from a development standpoint the knee-jerk is to decide to style the form itself instead of the input elements. A transparent input[type=text] to the left, and a transparent .PNG submit button to the right and you've got a sharp looking search field.
As you've discovered though, you give up the CSS style capabilities associated with :focus because the input field isn't the one controlling the background / color etc - the form element is instead.
The form:focus selector would be a perfect way to handle that. Unfortunately, we've got to wait to CSS4 for that (thanks to matt3141 for the tid-bit).
In the meantime, you have a few options available
Option 1 - Forgo the Clickable Submit Button
I usually try and avoid this if possible, but you have the option to forgo the submit button altogether. Style the text field as you intended, and use a background image with the position limited to the left or of the field right. When the user types in their query, and presses enter, you can still fire a GET action. The example image above uses this technique.
Example: http://designdisease.com/
Pros: Easiest to set up.
Drawbacks: Users who still click search buttons might be confused.
Option 2 - Use an Alternate Element to Style the Background
Your next option is to take advantage of the sibling selector and content tags as o.v. has so generously explained in his/her previous answer. This in effects adds a new element and styles it to act as a new background for a specified area when the :focus effect is applied to an input field.
Example: http://jsfiddle.net/ovfiddle/PEK7h/2/
Pros: Extendable to larger forms with multiple fields more easily.
Drawbacks: The intensive selectors may not degrade as gracefully as we'd like.
Option 3 - Use Absolute Positioning to Stack the Elements
In situations where the text field will encompass the full width of the form, you can use a the position:absolute; attribute to simply load the submit button over top of the input element, and then a few css tweaks on the button to remove the background / border - giving the same effect as our example image above, but with added benefit of making it clickable.
Step One: Give the form a position - relative/absolute/fixed.
Step Two: Give the text field a width of 100%.
Step Three: Give the button an absolute position, and right position of 0.
I've updated o.v.'s fiddle to incorporate the new technique:
Example: http://jsfiddle.net/PEK7h/17/
Pro's: Degrades gracefully, gives us what we want in most single input field cases.
Drawbacks: Not as easily extendable to large forms like o.v.'s fix is.
--
As you can see, each option has its own drawbacks - but if you know about them ahead of you can usually lessen their impact. Hope this helps!
If you have multiple forms in the page, without JS, the renderer will not be able to link the stylesheet and the form. The best way to do it is to have the form name/ID and have JavaScript to apply the stylesheet when form get focus.
You cannot "focus" on a form. You can only "focus" on the form elements inside the form (that are editable and enabled) using CSS. Hope this helps.
how can i make cool check-box and select-box elements in html form ,
that work in IE too ?
What is usually done is to create a fake element that (via javascript) sets the value to a hidden element (hidden via css). Then this fake element can have any visual style applied to it.
Creating custom styled checkboxes with jQuery
Checkboxes and radiobuttons can't be styled (consistently) every browser displays them in their own way, and some browsers ignore the styles set to them completely.
What Ólafur Waage said (creating a fake element via javascript) is the most common way of doing it as far as i know.