I have a text input that I want to be specifically for currency. Inside the text field, it should say [$Other CAD]."$Other" should be aligned left and "CAD" should be aligned right, I currently just have a bunch of spaces between the "$Other" and the "CAD". This isn't ideal for different browsers, etc. Is there an easy way to get only the "CAD" portion of the placeholder to align right so it'll always fit regardless of the browser? Also, can I set two different text colors for the placeholder? For example, have the "$" and "CAD" in grey and the "Other" in black
<style>
.donation-amount-input {
height: 65px;
font-size: 34px;
}
.form-control::placeholder {
font-size: 34px;
}
#S {
color: #aaaaaa;
position: absolute;
font-size: 36px;
padding-left: 10px
}
#Other {
position: absolute;
font-size: 36px;
padding-left: 35px;
}
#CAD {
color: #aaaaaa;
position: absolute;
font-size: 36px;
padding-left: 40%;
}
</style>
<body>
<p onclick="fakePlaceholder()" id="S">$</p>
<p onclick="fakePlaceholder()" id="Other">Other</p>
<p onclick="fakePlaceholder()" id="CAD">CAD</p>
<input
type="text"
onselect="fakePlaceholder()"
class="form-control donation-amount-input"
id="other-amount"
/>
</body>
<script>
function fakePlaceholder() {
var S = document.querySelector('S');
S.style.display = 'none';
var Other = document.querySelector('Other');
Other.style.display = 'none';
var CAD = document.querySelector('CAD');
CAD.style.display = 'none';
}
</script>
You can't do that with a placeholder, you will have to create a fake one with javascript for the effect. You have to add three elements : one for the $, one for Other and one for CAD. Then you can styles them and positioning them with position: absolute; in the input to create a fake placeholder. ( Don't forget: you can't put html elements in an input, so you will have to wrap the input and the three elements into another element so you position everything according to it ).
After that, you will have to use javascript to hide this fake placeholder when someone clicks or moves with keyboard on it.
Try something, and if you need help, come back here and show us your code.
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>
For example, I have a button with a long text on it:
[Please click this button for more information]
Since the text is very long, on some small screens, it would be wrapped.
[Please click this button for
more information]
I want to make the text-align as left when it's wrapped and center when it's not.
For instance:
Is there any pure CSS solution for it?
There is no general way to apply different styles to elements at different widths using only CSS. This is a very good thing because it could be very easily broken, as the following example shows (using pseudocode with the form of CSS media queries).
#element( min-width: 600px ) {
button {
width: 500px;
}
}
#element( max-width: 600px ) {
button {
width: 700px;
}
}
CSS
The only way to do it using pure CSS is to find the window width at which the button text is rendered over two lines, and write a media query for that width. For example, if you test your page and find that when it is sized at 500px width or less the button is squished so that the text renders on two lines, you might add the style:
.button {
text-align: center;
}
#media( max-width: 500px ) {
.button {
text-align: left;
}
}
Of course, the exact point at which the text is rendered over two lines may differ depending on browser/layout engine.
JavaScript
Using JavaScript you can test the height of each button when the page loads and when the page is resized. If you know the height of the button when it has a single line of text and the button's height is greater than that, then you can apply a different style to those buttons.
For example:
function buttonStyles() {
let buttons = document.querySelectorAll( 'button' )
for ( let button of buttons ) {
if ( button.offsetHeight > 40 ) {
button.classList.add( 'left' )
} else {
button.classList.remove( 'left' )
}
}
}
window.addEventListener( 'load', buttonStyles )
window.addEventListener( 'resize', buttonStyles )
button {
width: 300px;
display: block;
text-align: center;
margin: 10px;
font-size: 15px;
line-height: 15px;
padding: 5px;
}
button.left {
text-align: left;
}
<button>A single line</button>
<button>Two<br>lines</button>
I am new to Angular 2 and I'm after do a custom button display when selected. For questions I have 2 buttons for the answer which only one is allowed to be selected (I have all this working) but what I'd like to do is add a tick in from of the selected buttons value.
I know it will need to be done in CSS, which is fine, but I don't know how to do it.
I tried the below but it doesn't seem to work:
.md-fab.md-primary.md-grey-ajb-red-theme.md-button, .md-raised.md-primary.md-grey-ajb-red-theme.md-button
{
font-family:'Glyphicons Halflings';
content:"\e089";
}
Below is an example of what I want. When the button not selected or un-selected the button should just say 'Yes' and obviously have a different colour:
Try this:
.md-fab.md-primary.md-grey-ajb-red-theme.md-button, .md-raised.md-primary.md-grey-ajb-red-theme.md-button
{
position: relative;
text-align: center;
}
.md-fab.md-primary.md-grey-ajb-red-theme.md-button:before, .md-raised.md-primary.md-grey-ajb-red-theme.md-button:before
{
content:"\e089";
display: block;
font-family:'Glyphicons Halflings';
font-size: 20px;
position: absolute;
top: 7px; // adjust as per your need
left: 110px; // adjust as per your need
}
take a boolean variable to set the class on off and render the text on button click. Call a method on click which will change the button text.
I have a span inside another span. I would like to allow the user to be able to select the text from the parent span, but not the child one.
Note: user-select (family) does not work. It prevent the selection to start or end in this area, but the text is still in the end clipboard result if I surround it with the select in the text from the parent span.
For example:
<head>
<style>
.hole-hint {
display: inline-block;
position: absolute;
bottom: 45%;
font-size: 12px;
color:rgb(255, 0, 0);
background-color:rgba(255, 225, 225, 0.5);
z-index:1;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.hole {
padding-top: 7px;
position: relative;
background-color:#EEEEEE;
}
</style>
</head>
<body>
<span> this is the parent text<span class="hole"><span class="hole-hint">no copy</span></span>and this is text on the other side </span>
</body>
</html>
I had a similar need, I used place holders for text that wasn't entered yet. However if the user wanted to copy that block of text they would never want the place holders in the copied text. I came up with the following solution.
Here is an example, it uses some jquery but that could be replaced
CSS (not really needed just for fun)
div.copying { background-color: yellow; }
div.copying .nocopy { display: none; }
HTML (Note: if you wanted to apply to the entire page, move oncopy to )
<body>
<div>text not related to the copy, dont select this</div>
<div oncopy="handleHideCopy(this);" class="container">
<span>the text between ><span class="nocopy"> I don't want this text copied </span><span>< will be excluded from copy, or at least in IE</span>
</div>
<div>and don't select this either</div>
</body>
JS
function handleHideCopy(el)
{
$(el).addClass('copying');
var innerHtml = el.innerHTML;
$(el).find('.nocopy').remove();
setTimeout(function(){
$(el).removeClass('copying');
$(el).children().remove();
el.innerHTML = innerHtml;
},300);
}
The reason why this works is because oncopy is called on the parent element before the copy takes place, and the content that must be hidden has to actually be removed, as display:none does absolutely nothing for copy.
Instead of using innerHTML for large amounts of html a more targeted DOM remove/insert should be used to remove the content and put it back where it belongs. I don't have an example handy for that.
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.