Is it somehow possible to give the button a opacity property like the form?
Because I want to make the button "invisible", but clickable.
Although I'm not sure why you would want to do that, I think this might work:
<button class = "hide">My Button</button>
for the styling:
.hide{
opacity: 0;
background: none;
border: none;
}
I am assuming this is html...
Related
Is there any way to revert the default styling of button:disabled WIHTOUT using all: unset? I don't know what is being changed because if I do something like this:
button:disabled {
opacity: 1;
}
it still dosent work
Try styling the background-color instead of opacity
button:disabled {
background-color: #ccc;
color: black;
}
<button disabled>Button Disabled</button>
<button>Button</button>
I have some button styling, which applies when the button has the disabled attribute.
However, I also have a .loading class that I'd like to apply to buttons.
I want the disabled styling to apply only if the button does not have the loading class.
Please see my JS Fiddle: https://jsfiddle.net/pbcykx5L/
I'm imagining something like this, but it doesn't work. Is there a way of doing this?
.btn:not(.loading):disabled {
background-color: #cdd9c3;
border-color: #cdd9c3;
text-shadow: none;
cursor: not-allowed;
}
It does work. In your fiddle, there is no difference in the styles being applied to .btn:not(.loading):disabled and .btn:disabled. If you change the background color of one to red, you can see the CSS is being properly applied.
.btn:disabled {
background-color: #cdd9c3;
}
.btn:not(.loading):disabled {
background-color: red;
}
<button class="btn">Button</button>
<button class="btn" disabled>Button (disabled)</button>
<button class="btn loading" disabled>Button (disabled and loading)</button>
I've had a look around but can't quite find what i'm looking for.
I currently have a css animation on my page which is triggered by :hover. I would like this to change to 'click' or 'touch' when the page is resized past width 700px using media queries.
Here is what i have at the moment: http://jsfiddle.net/danieljoseph/3p6Kz/
As you can see, the :hover will not work on mobile devices but i still want to ensure it works the same way just by click, not hover.
I would rather use css if possible but happy with JQuery also.
I have a feeling this is very easy to do but i am just missing something very obvious! Any help would be appreciated.
Here is the css animation:
.info-slide {
position:absolute;
bottom:0;
float:left;
width:100%;
background:url(../images/blue-back.png);
height:60px;
cursor:pointer;
overflow:hidden;
text-align:center;
transition: height .4s ease-in-out;
-webkit-transition: height .4s ease-in-out;
-moz-transition: height .4s ease-in-out;
}
.info-slide:hover {
height:300px;
}
If you use :active selector in combination with :hover you can achieve this according to w3schools as long as the :active selector is called after the :hover selector.
.info-slide:hover, .info-slide:active{
height:300px;
}
You'd have to test the FIDDLE in a mobile environment. I can't at the moment.
correction - I just tested in a mobile, it works fine
You can add onclick="" to hovered element. Hover will work after that.
Edit: But you really shouldn't add anything style related to your markup, just posted it as an alternative.
document.addEventListener("touchstart", function() {}, true);
This snippet will enable hover effects for touchscreens
I got the same trouble, in mobile device with Microsoft's Edge browser. I can solve the problem with: aria-haspopup="true". It need to add to the div and the :hover, :active, :focus for the other mobile browsers.
Example html:
<div class="left_bar" aria-haspopup="true">
CSS:
.left_bar:hover, .left_bar:focus, .left_bar:active{
left: 0%;
}
On most devices, the other answers work. For me, to ensure it worked on every device (in react) I had to wrap it in an anchor tag <a> and add the following:
:hover, :focus, :active (in that order), as well as role="button" and tabIndex="0".
I am a CSS noob but I have noticed that hover will work for touch screens so long as it's a "hoverable" element: image, link, button. You can do it all with CSS using the following trick.
Change your div background to an actual image tag within the div or create a dummy link around the entire div, it will then register as a hover when you touch the image.
Doing this will mean that you need the rest of your page to also be "hoverable" so when you touch outside of the image it recognizes that info-slide:hover has ended. My trick is to make all of my other content dummy links.
It's not very elegant but it works.
A CSS only solution for those who are having trouble with mobile touchscreen button styling.
This will fix your hover-stick / active button problems.
body, html {
width: 600px;
}
p {
font-size: 20px;
}
button {
border: none;
width: 200px;
height: 60px;
border-radius: 30px;
background: #00aeff;
font-size: 20px;
}
button:active {
background: black;
color: white;
}
.delayed {
transition: all 0.2s;
transition-delay: 300ms;
}
.delayed:active {
transition: none;
}
<h1>Sticky styles for better touch screen buttons!</h1>
<button>Normal button</button>
<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>
<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures. With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely. This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>
<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>
Well I agree with above answers but still there can be an another way to do this and it is by using media queries.
Suppose this is what you want to do :
body.nontouch nav a:hover {
background: yellow;
}
then you can do this by media query as :
#media(hover: hover) and (pointer: fine) {
nav a:hover {
background: yellow;
}
}
And for more details you can visit this page.
I think this simple method can achieve this goal.
With CSS you can turn off pointer event to 'none' then use jQuery to switch classes.
.item{
pointer-events:none;
}
.item.clicked{
pointer-events:inherit;
}
.item:hover,.item:active{
/* Your Style On Hover Converted to Tap*/
background:#000;
}
Use jQuery to switch classed:
jQuery('.item').click(function(e){
e.preventDefault();
$(this).addClass('clicked')l
});
How to make content in some div block inactive using JavaScript?
Let's say there is a button with command "Enable / Disable". And there is one div block with some text. When pushing button "Enable / Disable", is it is "Enable", you can work with content inside, but when "Disable", you can't work with content inside div block.
I imagine in order to make inactive content inside div block, we need to put another layer upon that will prevent from editing content on the content div block.
I'm getting confused how to realize this kind of feature.
Without using an overlay, you can use pointer-events: none on the div using CSS.
div.disabled
{
pointer-events: none;
/* for "disabled" effect */
opacity: 0.5;
background: #CCC;
}
Reference
Set pointer-events as none for the div[disabled] in CSS,
div[disabled]
{
pointer-events: none;
opacity: 0.7;
}
You can make div disabled by adding disabled attributes.
<div disabled>
<!-- Contents -->
</div>
div[disabled]
{
pointer-events: none;
opacity: 0.6;
background: rgba(200, 54, 54, 0.5);
background-color: yellow;
filter: alpha(opacity=50);
zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}
Using jquery you might do something like this:
// To disable
$('#targetDiv').children().attr('disabled', 'disabled');
// To enable
$('#targetDiv').children().attr('enabled', 'enabled');
Here's a jsFiddle example: http://jsfiddle.net/monknomo/gLukqygq/
You could also select the target div's children and add a "disabled" css class to them with different visual properties as a callout.
//disable by adding disabled class
$('#targetDiv').children().addClass("disabled");
//enable by removing the disabled class
$('#targetDiv').children().removeClass("disabled");
Here's a jsFiddle with the as an example: https://jsfiddle.net/monknomo/g8zt9t3m/
if you want to hide a whole div from the view in another screen size. You can follow bellow code as an example.
div.disabled{
display: none;
}
I have a button i want to convert the button into a hyper link, it works fine in Mozilla but in Internet Explorer it presses down as a button a click takes place ... so please help ....
Input.Button-Link, input.Button-Link:active
{
border: 0px;
behavior: url("cssHover.htc");
padding: 0px;
width: auto;
overflow: visible;
background: transparent;
color: Blue;
text-decoration: underline;
display: inline-block;
}
input.Button-Link:active
{
padding-right:50px;
outline:0;
}
Input.Button-Link:hover
{
cursor: pointer;
}
I don't understand what you're trying to accomplish but here are a few things you can try:
Add styles to input.Button-Link:focus
By using <input type="image" src="button.gif" alt="Button" />
In conjunction with jQuery use this plugin to style your buttons
You need JavaScript to solve this for IE.
IE's behaviour here is hard-coded and can't be changed with CSS IIRC. The last thing that springs to my mind is to use display: inline instead of display: inline-block.
You might be better off using a link and a tiny bit of JavaScript.