I am using Ionicons on a project and have replaced the standard images for radio and checkbox with these icons.The issue I have is the actual default items are showing through the Ionicons when rendered.
I have the following HTML:
<input type="checkbox"
name="client{!! $client->uuid !!}"
class="checkbox-icon ion-android-checkbox-outline-blank" checked>
I also have the following CSS:
.checkbox-icon:before,
.radio-icon:before {
visibility: visible;
font-size: 20px;
}
.checkbox-icon.ion-android-checkbox-outline-blank:checked:before {
content: "\f374"; // icon for selected
font-size: 20px;
color: $brand-primary;
}
.radio-icon.ion-ios-circle-outline:checked:before {
content: "\f120"; // icon for selected
font-size: 20px;
color: $brand-primary;
}
input[type=checkbox].checkbox-icon.ion-android-checkbox-blank,
input[type=radio].radio-icon.ion-record {
visibility: hidden;
}
But although the checkboxes/radio buttons behave correctly, I can see the standard item below the ionicon. Is this due to the icon having a transparent background?
I tried changing opacity to 100% but it did not help.
I have created the custom checkbox and by using the same concept you can create the radio button as well. For now I have created the normal (color change) checkbox but you can customize it as per your own requirements. Please follow the below mentioned link:
URL: https://jsfiddle.net/qq92vbcm/
Related
I want to make a button that changes the text inside the button by pressing the button, but I don't know how! :(
I used :hover, but when I move the mouse pointer away, it goes back to its previous state.
There is the possibility of solving it with the pseudo-class :hover and the use of data attributes. The idea of this solution is that you hide the original button text, add an empty content and then use hover over the element to show the content of the data attribute.
I'll show you how in the following example:
body {
background-color: #F2CD5C;
text-align: center;
}
.container {
margin-top: 30vh;
}
/*
MARK BUTTON:
In the button styles, it is necessary to hide the original text that we generated, to create the correct spacing and the data attribute text can overlap
The text color must be the same as the button background.
Position must be relative.
*/
.button {
position: relative;
padding: 0.5em 1em;
border: 2px solid #fff;
border-radius: 15px;
font-size: 2em;
color: black;
background: black;
}
/*
MARK USE :before and :after
Setup pseudo-element ::before with content: ""; and position must be absolute and setup with the original position text inside the button.
Write ::after with the exact text inside button = Click me! with the same position and setup to ::before pseudo-element
*/
.button::before {
content: "";
position: absolute;
left:0;
width: 100%;
text-align: center;
opacity: 0;
color: white;
}
.button::after {
content: "Click me!";
position: absolute;
left:0;
width: 100%;
text-align: center;
opacity: 1;
color: white;
}
.button::before {
content: attr(data-hover);
}
.button:hover:before{
opacity: 1;
}
.button:hover:after{
opacity: 0;
}
<div class="container">
<button class="button" type="button" data-hover="Hello world!">Click me!</button>
</div>
The code uses pseudo-elements ::before and ::after to display different text when the button is hovered over. The text "Click me!" is set as the content for the ::after pseudo-element, while the ::before pseudo-element gets its content from the "data-hover" attribute. When the button is hovered over, the ::before pseudo-element's opacity becomes 1 and the ::after pseudo-element's opacity becomes 0, effectively hiding and showing different text on the button.
I hope this can help you solve your question. Anyway, this solution is not clean, we should handle the DOM using JavaScript.
Reference Links
Using data attributes
I only know how to do this using javascript, hope that helps.
HTML
<button class="btn">Hey, click me!</button>
JS
first I store the button in a variable
var button = document.querySelector(".btn")
then I add an event listener to the button with the "click" event, which will make the function "function()" be executed whenever the button is clicked
button.addEventListener("click", function(){})
now, I define the function to change the text of the button using "this" to access the button of the function and ".textContent" to change the text that was inside
button.addEventListener("click", function(){
this.textContent = "Hey, you clicked me!"
})
Click "run" for a preview
var button = document.querySelector(".btn")
button.addEventListener("click", function(){
this.textContent = "Hey, you clicked me!"
})
<button class="btn">Hey, click me!</button>
Since I have a PWA i can only find tutorials for uploading images using the input field. That part is working but I'm trying to replace the default 'choose file' icon with a custom image.
Here is a pic of what I have:
I don't want the 'choose file' image to show up at all. Also there's a default wording 'No file chosen'. I just want the image that's in the background but I haven't found anything online to shows how to replace it.
.input_pic {
background-image: url("../../../assets/image/SpaghettiPlus2.png") !important;
background-repeat: no-repeat;
}
<div *ngSwitchCase="'false'">
<ion-input class="input_pic" type="file"
id="capture"
accept="image"
capture (change)="uploadFromFile($event, 'photo1')"></ion-input>
</div>
It's possible to style the choose button with ::file-selector-button, however, you can't do anything about the no file chosen text with this solution.
Well, you can, by setting color to transparent, but it's not perfect.
#browse::file-selector-button {
display: none;
}
#browse {
color: transparent;
}
#browse::before {
content: url('https://via.placeholder.com/150');
}
<input type="file" id="browse">
Another solution is to hide the entire input control and use a label to trigger the browse event of the input control.
label {
display: block;
width: 150px;
height: 150px;
background: url("https://via.placeholder.com/150");
cursor: pointer;
}
#browse {
display: none;
}
<label for="browse" title="click to browse file"></label>
<input id="browse" type="file"> </input>
Simply redirect the click on your image to the input, and hide the input completely:
document.querySelector("img").onclick = (evt) => {
document.querySelector("input").click();
};
input { display: none; }
img { cursor: pointer; }
<img src="https://picsum.photos/100/100">
<input type="file">
What is a custom HTML code for having a link (say abc123.com) which is of certain size and color and which opens in a new/blank tab.
Have tried blank standalone with link but need to know how to change the size and font color of the the link word "SUBMIT"
Ok, so what you need is to use the anchor tab which is In this to put the url is to use the href attribute and then the url. To chance the color and size and all of that would require you to have a class or id for the link. Then using CSS, you could format this link. use the color tag to change text color, and font-size to change the font size. For example, this is what I would do.
<style>
.link {
color: blue;
font-size: 30px;
}
</style>
Submit
Or, if that isn't what you want, you could try using a button and then an onclick function that opens a new link in a new tab. Try this code :
function submit() {
window.open('abc123.com');
}
<style>
.submit-button {
outline: none;
border: none;
background-color: transparent;
color: blue;
font-size: 40px;
}
.submit-button:hover {
text-decoration: underline;
}
</style>
<button class="submit-button" onclick="submit()">Submit</button>
I searched on SO and Google and I couldn't find anything related. Is there any way I can hide the radio button next to an image (that is used as a label for it) but still keep its functionality when clicking on the label?
I have tried several methods but it seems that using display:none or visibility:hidden makes the radio function useless.
I have tried several methods but it seems that using display:none or visibility:hidden makes the radio function useless.
But it works. Maybe you didn't set for attribute:
<input id=radio1 name=testradios type=radio><label for=radio1>radio1</label>
<br>
<input id=radio2 name=testradios type=radio><label for=radio2>radio2</label>
#radio1 {
display: none;
}
OR
#radio1 {
visibility: hidden;
}
Both hide radio button but label is still clickable and checks its radiobutton.
http://jsfiddle.net/m0fbd75w/
In Angular, display:none or visibility:hidden didn't work for me.
Instead, I used:
input[type=radio] {
opacity: 0;
}
document.getElementById('myId').addEventListener('click', function() {
alert(this.checked);
})
label {
display: inline-block;
}
label:before {
content: '';
background: url('http://placehold.it/350x150') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
}
input {
display: none;
}
<input type="radio" id="myId">
<label for="myId"></label>
Just cover them with another div whose color matched with the background. This will hide the radio buttons and still your radio buttons will work on clicks of their labels. Hope that helps..
I need to create an HTML text input element that features multicolored placeholder text. All of the text should be gray except, but a closing asterisk should be red, as in:
This strikes me as a seemingly simple task that is actually a lot more complicated because of how browsers restrict our ability to style native input elements.
I have heard of people using CSS to override native input styles so they can use custom fonts, etc., but is there away to have two special text styles (gray and red)? Or do I need to use an alternative (non-native) input?
Try something like this: http://jsfiddle.net/vmuJm/
The trick: address the placeholder text, add a "required" class to required inputs, and use the :after pseudo element to add an appropriately colored asterisk.
[EDIT] It looks like this is only working for Webkit browsers.
I have a rather fun way to do this and seems to work great in all browsers.
(Works fine in IE 8+, chrome, and Firefox.)
What I am doing is using the spans I put inside of the label to act as the value text.
Here is the html structure,
<label><span class="title">Name<span class="symbol">*</span></span>
<input type="text" />
</label>
The css,
label {
position: relative;
}
label:hover span {
display: none;
}
input[type="text"]:focus, input[type="text"]:active {
z-index: 2;
}
label input[type="text"] {
position: relative;
}
.title {
color: gray;
position: absolute;
left: 5px;
top: 1px;
z-index: 1;
}
.symbol {
color: red;
}
Last here is the jQuery I wrote to not allow the span to hover over your input if the input is filled in.
$('input[type="text"]').blur(function() {
if( $(this).val().length >= 1) {
$(this).toggleClass('active');
}
else {
$(this).removeClass('active');
}
});
Here is a JSFIDDLE to play with.