I am trying to do something like
label::after{
cursor: pointer;
...
}
and
<label>
<input type = "checkbox">
</label>
(note the checkbox is hidden with CSS and ::after styles are applied to make a nice button)
When this is run in Chrome, everything works. In Gmail (desktop), however, it does not. A normal cursor is displayed. Why?
Related
I was creating a search function on my webpage, where when the button (label) is clicked then the search bar will be appeared. However, it is not working with checkbox. I have another checkbox on the same page which is working and I make sure the for attribute in label is pointing correctly.
I have the following code in my html:
<input type="checkbox" id="search-switch" />
<div>
<label for="search-switch">
<button type="button"><svg><!-- a svg pic here --></svg></button>
</label>
<!-- some other elements -->
</div>
<div class="search-placeholder">
<!-- a search bar -->
</div>
and the this in css:
#search-switch {
display: none;
}
.search-placeholder {
display: none;
}
#search-switch:checked ~ .search-placeholder {
display: block;
}
I also tried to put the <input> after the div that contains the label but still not working.
<div>
<label for="search-switch">
<button type="button"><svg><!-- a svg pic here --></svg></button>
</label>
<!-- some other elements -->
</div>
<input type="checkbox" id="search-switch" />
<div class="search-placeholder">
<!-- a search bar -->
</div>
I'm building a no-js page in case people has javascript disabled in their browser settings, so I want a script-free solution. I know it can be easily done with js, and I don't even need to use checkbox method. Because of the layout I can't move either the place of <label> or the place of the search bar.
So I deselect the display: none; of my input checkbox and I actually solve the problem myself. It appears that with the button inside, the checkbox isn't checked. I now only need to add pointer-events: none; to my css of the corresponding button and it works now.
Here I come another question, which I think it might be self-explanatory: How would my button work again when js isn't disabled? Should I point it to checkbox instead?
I feel like a beginner. I just don't manage to address the datepicker icon with CSS. There is simply nothing for this in the DOM. I've already tried a few approaches, but without success.
I use the WordPress theme "Bridge" and have already looked for this icon in the Qode Options. Unfortunately I can't find anything.
I copied this out of the chrome dev tools. It is practically the complete container in which the datepicker is located. No: :before, :after or similar to be found:
<div class="column1">
<div class="column_inner">
<div class="qode-cf-date-holder">
<span class="wpcf7-form-control-wrap your-date">
<input type="date" name="your-date" value="2020-10-17" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date required" min="2020-10-17" max="2035-12-31" aria-invalid="false">
</span>
</div>
</div>
</div>
I just want to set the cursor to pointer :D. The icon is placed inside the input element (but I can't see how) that gets generated by contact form 7.
Here is a screenshot of the input field:
You must use CSS Pseudo-elements. Unfortunately, currently the input fields in html do not support this feature.
But you can use this feature in the field's parent. Your code looks something like this. (If you use Font Awesome).
.qode-cf-date-holder {
position: relative;
padding-left: 40px;
}
.qode-cf-date-holder:after {
position: absolute;
font-family: 'Font Awesome 5 Pro';
content: '\f073';
left: 0;
top: 0;
font-size: 16px;
z-index: 999;
}
You can style Pseudo-Elements almost like any other DOM Element, for example you can assign an image to its background.
Without a visual reference a bit hard to answer but have you tried:
input[name="your-date"] {
//css here
}
I would like to change opacity of image only when it is in disabled state like i'm doing for input button below:
input[type="button"]:disabled {
border: 1px solid #AAA;
border-radius: 4px;
opacity:0.5;
}
img:disabled {
opacity:0.5;
}
Normal button: <input type="button" value="Close" /><br>
Disabled button: <input type="button" value="Cancel" disabled="true"/>
<br><br>
Normal: <img src="http://i.stack.imgur.com/AkfB4.png" /><br>
Disabled: <img src="http://i.stack.imgur.com/AkfB4.png" style="opacity:0.5" disbled />
But it's not working for images, if I add :disabled in css. Please help me to get this.
As stated by W3C:
An element is said to be actually disabled if it falls into one of the
following categories:
button elements that are disabled
input elements that are disabled
select elements that are disabled
textarea elements that are disabled
optgroup elements that have a disabled attribute
option elements that are disabled
fieldset elements that have a disabled attribute
Note: This definition is used to determine what elements can be focused and which elements match the :disabled pseudo-class.
So, you should not use :disabled for images. You should to find some other way.
The best possibility should be to use an input tag with the type attribute image.
This way to can make use of the disabled attribute:
input[type=image]:disabled
{
opacity:0.5;
}
<input type="image"
src="http://i.stack.imgur.com/AkfB4.png"
border="0" disabled />
If you don't want the a form to submit when you click it, you should add onclick="return false;" to the input tag.
Another possibility as mentioned by #DevonBernard is to add a class disabled, and use CSS to get the opacity right.
img.disabled
{
opacity:0.5;
}
<img src="http://i.stack.imgur.com/AkfB4.png"
alt="Image" class="disabled">
If you do want to use the disabled attribute (even though you shouldn't) , another possibility is to use the attribute selector by using:
img[disabled]
{
opacity:0.5;
}
<img src="http://i.stack.imgur.com/AkfB4.png"
alt="Image" disabled>
This is not the correct way, since the disabled attribute should not be used on images in the first place. Also some browsers might not support this (now or in the future).
CSS3 :disabled selector is usually used on form elements (checkboxes, buttons, etc), so if you want to apply opacity on img, you should use:
img.disabled
{
opacity:0.5;
}
So it is about the CSS class. I don't think I have an idea what could "disable state" on image mean actually, perhaps only an image state after you clicked it, but even in that case you can't go with "disabled" selector.
You can also use the CSS selector for "disabled" state, which works fine in my case:
button[disabled] > img {
opacity: 0.5;
}
Best
Manuel
I am trying to use Font Awesome icons in the input placeholder.
I tried this but not working.
<body>
<input type="text" placeholder="" style="font-family:FontAwesome"/>
</body>
What’s wrong with this? I am getting some weird number in the placeholder instead of icon.
You can add font awesome icon as like that
<input type="text" placeholder="" style="font-family:Arial, FontAwesome" />
you can also check out the fiddle Fiddle click here
You can also use an icon outside of placeholder, placed with HTML. Here is my solution:
HTML
<i class="fas fa-search form__icon"></i>
<input type="text" name="search" class="form__input" placeholder=" Search">
CSS
.form__icon {
position: absolute;
pointer-events: none;
z-index: 2;
}
.form__input {
position: relative;
z-index: 3;
}
.form__input:placeholder-shown {
z-index: 1;
}
It's a bit complex, but it also give a possibility to use animated, rotated and flipped icons.
Check my CodePen: https://codepen.io/dzakh/pen/YzKqJvy
When you try to use a font icon and what you get is some weird character, this is probably due to the fact that the browser tries to render that icon with a wrong font. Check what your input's font-family is when rendered by inspecting the element, and then going into the 'Computed' tab (Chrome: Right click -> Inspect Element -> Computed). If it's not font-awesome, but you think you set it, try to use font-family: FontAwesome !important;. This will override any of the possible input's parrent font-family setting.
Hi all I am currently trying to develop an HTML5 and CSS3 website. What I want to be able to do is when a user hovers over an input area of the website I want to be able to display a little pop up message next to the mouse position to display information to the user.
Is this possible, if not with HTML5 and CSS3 but using something else.
Here is a very simplistic solution I use as a base with my forms.
<style>
.help {
background-color: #FFFF73;
border-radius: 10px;
display: none;
opacity: 0.9;
padding: 10px;
z-index: 100;
}
.help_link:hover + span {
display: inline;
}
</style>
<form>
<label>Input: <input type="text" name="text" /></label> Help <span class="help">Some help here on this input field.</span><br />
<label>Input: <input type="text" name="text2" /></label> Help <span class="help">Some help here on this input field.</span><br />
</form>
The usual disclaimers apply: this is a base, will not work in IE without an external library to add advanced selectors, border-radius not supported in Firefox 3.5, etc.
<input type="text" title="info for user here"/>
You can hover over an input text field and the title will allow a tool-tip type message pop up.