<input type='text' />
I need to add placeholder text in css, something like this:
input:placeholder{content: 'placeholder text';}
You can't set placeholders using CSS for all browsers. The only browser that supports it at the moment is webkit.
Take a look at this question: How to set placeholder value using CSS?
you cant do this with css. however you can accomplish this with jQuery as shown in the demo below.
$(document).ready(function() {
placeholders();
function placeholders() {
var count = 0;
$('input[type=text]').each(function() {
count++;
$(this).attr('placeholder', 'value ' + count);
});
}
$(document).on('click', '.delete', function() {
$(this).closest('div').remove();
placeholders();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
Related
I want to remove text off the screen when a checkbox is selected using CSS. I want to know if there's a way of doing this through CSS. Here's some code
<form>
<input id="check" type="checkbox">
</form>
<p> sample text </p>
How do I remove the sample text when the checkbox is selected. I want to achieve this by using CSS.
UPDATE
It's not possible to do it through CSS, so can you tell me if there's a way to do this through JS.
If you can change the HTML to
<form>
<input id="check" type="checkbox">
<p>sample text</p>
</form>
You could use adjacent sibling selector and the checked pseudo class.
/* Remove entire p */
input:checked + p { display:none; }
/* Resize the font to zero */
input:checked + p { font-size: 0; }
/* Indent the text so it is offscreen */
input:checked + p { text-indent: -9999px; }
You can actually achieve this result if you are able to change your structure a bit. You will need to put input and p tag together in the same div so we can target them with CSS.
html:
<form>
<input id="check" type="checkbox">
<p class="hello"> sample text </p>
</form>
css:
input[type="checkbox"]:checked + p {
display:none
}
Here's a solution with JavaScript:
func = () => {
if(document.querySelector("input").checked) {
document.querySelector("p").style.display = "none";
} else {
document.querySelector("p").style.display = "block";
}
}
<form>
<input id="check" type="checkbox" onchange="func()">
</form>
<p>Some Text</p>
Make a little change in your HTML:
<form>
<input id="check" type="checkbox">
<p id="home"> sample text </p> <!-- added an id to the p tag -->
</form>
Create a JavaScript file, lets say 'main.js', inside write the code:
function change() {
var decider = document.getElementById('check');
if(decider.checked){
document.getElementById('home').innerHTML = "";
}
}
Add a script tag to link your JS file to the HTML:
<script type="text/javascript" src="main.js"></script>
Am attempting to use Stripe elements form (v3) with a meteor form. All code runs without blowing up but nothing is rendered after mount() is called. Any ideas?
js:
Template.billing.onRendered(function(){
let elements = stripe.elements();
let style = {
base: {
// Add your base input styles here. For example:
fontSize: '16px',
color: "#32325d",
}
};
let card = elements.create('card', {style: style});
card.mount('#card-element');
console.log("done");
})
html:
<template name="billing">
<form id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
</div>
<div id="card-errors" role="alert"></div>
</div>
<input type="submit" class="submit" value="Submit Payment">
</form>
</template>
Nevermind, it was actually rendering but the width was 0 for some reason, so messing around with the css works.
In my code, im using an onclick function to show an element with display:none. If I set a second element to display:none, how can i code the script to show both hidden elements onclick?
Here's the code I'm using:
<div id="element1" style="display:none;"></div>
<div id="element2" style="display:none;"></div>
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
</script>
Instead of IDs, use classes for your elements and show all elements with that class name on click (I am using jQuery):
Click Me
<div class="elem" style="display:none;"></div>
<div class="elem" style="display:none;"></div>
<script type="text/javascript">
$('#click-me').click(function() {
$('.elem').show();
});
</script>
You gotta put the all elements on a div container, and when you set the display to none, all elements will disappear.
Without jQuery
<input type="button" value="test element1" onclick="showStuff('element1')">
<input type="button" value="test element2" onclick="showStuff('element2')">
<div id="element1" style="display:none;"></div>
<div id="element2" style="display:none;"></div>
js code :
showStuff = function(id){
document.getElementById(id).style.display = "block";
}
Demo
This question already has answers here:
CSS to change the cursor style of the resize button on a textarea
(4 answers)
Closed 9 years ago.
I would like to be apply to apply a cursor style to the grip of the resize tool on a textbox. Currently when you hover over the box I have a cursor: text; property and I want to be able to change to a different cursor when hovering over the resize grip.
Here is the code, I know it doesn't matter. Just wanted it for reference.
<div id="form-box">
<form action="<?php htmlspecialchars(fonefinder.php);?>" method="post" />
<p>Enter The Number</p>
<div class="number-box">
<input type="number" pattern="[0-9]*" size="10" name="number" />
</div>
<h3 class="error"><?php echo $numberErr;?></h3>
<p>Enter Your Message</p>
<textarea name="message"></textarea>
<h3 class="error"><?php echo $messageErr;?></h3>
<div class="submit-btn">
<input type="submit" value="Send Message">
</div>
</form>
</div>
There is no such property, but you can fake it with a little bit of JavaScript and jQuery.
Live Demo
var $textareas = $('textarea');
$textareas.on('mousemove', function (event) {
var threshhold = 5;
var $container = $(event.currentTarget);
var width = $container.width();
var height = $container.height();
var x = event.offsetX;
var y = event.offsetY;
if (
width - x <= threshhold
&& height - y <= threshhold
) {
$container.addClass('resize');
} else {
$container.removeClass('resize');
}
});
$textareas.on('mouseout', function (event) {
$(event.currentTarget).removeClass('resize');
});
Then in your CSS, just set the cursor property based on the class:
.resize {
cursor: nwse-resize;
}
I'm currently building an app that has the option to change the theme. A theme in this instance, simply consists of changing the color of a few key elements in the app.
So currently, on all elements that require the theme color, I have given them the css class has-main-color.
In the controller, I get their desired color from the web service and set it to the scope as $scope.mainColor = color;.
All of this works fine, but the problem I'm getting is that I can't find a suitable method of applying this color to the has-main-color class.
Currently, I'm trying the following:
<style>
.has-main-color {
color: {{mainColor}}
}
</style>
As you could probably guess, this doesn't work so well.
So what would be the best approach to solve this problem using AngularJS?
Look at the documentation page for ngStyle. It has almost exactly what you want.
<input type="button" value="set" ng-click="myStyle={color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
I don't think you can use a class to do this, however try this
<div ng-app="test-app" ng-controller="MyController" theme-wrapper="{{mainColor}}">
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
});
app.directive('themeWrapper', function(){
var counter = 0, regex = /^theme-wrapper-\d+$/;
return {
restrict: 'A',
link: function(scope, elm, attrs){
attrs.$observe('themeWrapper', function(value){
var className = 'theme-wrapper-' + (counter++);
$('<style>.' + className + ' .has-main-color{color: ' + value + ';}</style>').appendTo('head');
var classes = elm.attr('class').split(' ');
angular.forEach(classes, function(v, i){
if(regex.test(v)) {
elm.removeClass(v);
}
});
elm.addClass(className);
});
}
}
});
Demo: Fiddle
Another easy fix
<div ng-app="test-app" ng-controller="MyController">
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
})
Demo: Fiddle
If anyone would like to use your original approach, I came across the same problem today and threw together a (tiny!) directive for style which allows for angular expressions inside inline style sheets.
https://github.com/deanmcpherson/angular-inline-style
Allows for
body { background-color: {{bgColor}}; }
With bg color attached to the appropriate scope.