I cannot edit the html code, is the question below possible using only "CSS" code?
How do you add a text just like a placeholder or something to an inputbox?
Here's the input text box code:
<input id="isn_email_address" type="text" name="user" size="40" maxlenth="90">
You can't set placeholders using CSS for all browsers. The only browser that supports it at the moment is webkit.
Using jQuery you can achieve this : Working DEMO
Note : you will need latest jquery library you can download from here jQuery Library
Try this code :-
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">
$(document).ready(function()
{
$('#isn_email_address').attr("placeholder", "Type your text here");
});
</script>
</head>
If you don't want to use placeholder,obviosly there is other way.I don't know wheather it's possible with css alone.But using javascript and css you can definitely do that.
You could use some pseudo elements, assuming you're not supporting IE7 and below.
#isn_email_address {
position: relative;
}
#isn_email_address:after { /*could use :before if you wanted too*/
content: "Type your text here";
display: block;
}
#isn_email_address:focus #isn_email_address:before {
display: none;
}
You'll probably need to do some z-index adjustment to make sure that you're able to select the textfield. Additionally, some css *left: /my value here/* to make sure it's in the right spot.
Related
i have this search bar in my application which i want to modify:
Right now the "X"-Icon is visible from the beginning even tho it does nothing before an input was done, so i want to make it appear AFTER the user starts entering text.
The icon is a SVG i added and styled seperatly.
I don't realy know how i can do this, i thought its easy and i can just use something like "::after" but it seems that this it not possible with input fields.
Ps.: im an absolute beginner in CSS so please have mercy.
Best way to achieve your requirement would be to have different classes which shows/hides the icon by checking when input is not empty in JS.
If you want to achieve without using JS you can target the adjacent button element when the input is focussed and add ::before pseudo element and style it.
input:focus+button:before {
content: "X";
position: absolute;
left: 0;
color: red;
}
It's not possible with CSS. You would have to use Javascript.
Javascript
// set the id of the x button to x-button
// set the id of the input field to input
var x_button = document.getElementById("x-button");
var input = document.getElementById("search-input");
input.oninput = function(){
if(this.value) x_button.classList.add("visible");
else x_button.classList.remove("visible");
}
CSS
.x-button { display:none;}
.visible {display:block;}
it is possible if you wanna do it using only css.
#Search{
font-size:22px;
color:green;
background-image:url('images/search.jpg');
background-repeat:no-repeat;
background-position:center;outline:0;
}
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
}
<input id="Search" name="Search" type="search" placeholder="Search" />
Is it possible to modify style of "Pay with Card" Stripe button? I've tried modifying by,
adding a new class defined in external style sheet
modifying its own class of stripe-button in external style sheet
and editing it inline with style=""
But I cannot get the button to change its style.
It looks like it might be possible with the custom integration instead of the simple integration (source: https://stripe.com/docs/checkout#integration-simple), but I was hoping there was something simpler.
Button with default style:
Does anyone have experience with this?
(I'm integrating into Ruby on Rails if that makes any difference.)
None of those worked for me. I ended up hiding the button in javascript and making a new one.
<form action="/your-server-side-code" method="POST">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="xxx"
data-amount="999"
data-name="zzz"
data-locale="auto">
</script>
<script>
// Hide default stripe button, be careful there if you
// have more than 1 button of that class
document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
</script>
<button type="submit" class="yourCustomClass">Buy my things</button>
</form>
Search for this class:
.stripe-button-el span
I think this is where you have to modify your own button's style.
You may overwrite it within your own external css file.
Although a little hacky, for anyone wanting a super quick and simple way of using a different button along with the "simple integration", especially if you don't have "solid JavaScript skills", you can just hide the Stripe button with;
.stripe-button-el { display: none }
This way, any submit button within the form will call the checkout so you can just use the button you already had before introducing Stripe.
The following will override the background color with the custom color #EB649C. Disabling the background-image is required, as well as styling both the button and it's inside span tag.
button.stripe-button-el,
button.stripe-button-el>span {
background-color: #EB649C !important;
background-image: none;
}
You should use data-label its part of the regular stripe Checkout API:
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<%= ENV.fetch('STRIPE_PUBLISHABLE_KEY') %>"
data-amount="10000"
data-label="Proceed to Pay with Card"
...
...
data-locale="auto">
</script>
Using jQuery, you can also simply scale the button like this:
<script>
$(function() {
$(".stripe-button-el").css({'transform': 'scale(2)'});
});
</script>
Or replace it by a button with any image you want, like this:
<script>
$(function() {
$(".stripe-button-el").replaceWith('<button type="submit" class="pay"><img src="/assets/paywithcard.jpg"></button>');
});
</script>
You can remove the button styles with Jquery and add your own. Worked a charm for me:
<script type="text/javascript">
$(document).ready(function(){
$(".stripe-button-el span").remove();
$("button.stripe-button-el").removeAttr('style').css({
"display":"inline-block",
"width":"100%",
"padding":"15px",
"background":"#3fb0ac",
"color":"white",
"font-size":"1.3em" }).html("Sign Me Up!");
});
</script>
The .stripe-button-el span actually works.
But you need to add !important in CSS to overwrite the default CSS.
You can try this,
$(".stripe-button-el").find("span").remove();
$(".stripe-button-el").html("Proceed to pay");
Pay with card is inside a span.
For those of you who want to change the background color of the button, make sure you do something like
.stripe-button-el span {
background: #5e366a !important;
background-image:none !important;
background-color: #5e366a !important;
}
in your css file. this will change the actual background of the button fr you. If you wish to have the parent div changed, you can do the same thing without the span or do a direct inline style.
I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.
I need a button-like control that has a checked property, so that when clicked it stays pressed. Something like the "Purge responses" button in the example image below.
How can I do this in CSS? I'm a CSS newbie. Can someone provide an example or point to one that is similar to this?
PS: I know that I need to use Javascript to update a boolean variable that holds the state of the button, and dynamically apply a style to the button. My problem is more like how to create a button that contains a checkbox , as I have only one image for background.
http://i.stack.imgur.com/vBV6F.png
As for CSS you can do the following:
<style type='text/css'>
/* this is the style of an unchecked "button" */
.input-check{
display:inline-block;
height:20px;
padding:5px 8px;
background:green;
width:70px;
color:white
}
/* This is the style for a checked "button" */
.input-check.checked{
background:red;
color:black;
font-weight:bold
}
/* Hide the checkbox */
.input-check input{
display:none
}
</style>
Next is the HTML. To reduce JavaScript coding, it's best to nest a checkbox inside a label. This will make it automatically handle the checking/unchecking of the checkbox when you click on the label.
<label class="input-check"><input onchange="change_state(this)" type="checkbox" value="something" name="test"/> click me </label>
Finally the JavaScript:
<script type="text/javascript">
/* If you have more experience in JavaScript, I recommend not binding the change event this way, I didn't bother much about this part, since I guess it isn't part of the question */
function change_state(obj){
if (obj.checked){
//if checkbox is being checked, add a "checked" class
obj.parentNode.classList.add("checked");
}
else{
//else remove it
obj.parentNode.classList.remove("checked");
}
}
</script>
This is a jsFiddle for you to test.
Why don't you just style a checkbox to look like a button?
Then you can use the :checked CSS psudeo selector to style it the way you want without adding classes through javascript.
Here's an elaborate example in CodePen: http://codepen.io/arjabbar/pen/csafj
See the section here titled checkbox button. If I'm understanding your question correctly, that seems to do what you're after, maybe with a little modification.
No CSS needed, if I understand what you want correctly
<button><input type="checkbox" /> Purge</button>
Then you'll likely need javascript to check and uncheck the box when the button is clicked, but the above is the basic idea.
Here's with a bit of quick js
<html>
<head>
<script type="text/javascript">
function check() {
var c = document.getElementById('check') ;
c.checked = (c.checked) ? false : true ;
}
</script>
</head>
<body>
<button onclick="check()"><input type="checkbox" id="check" /> Purge</button>
</body>
</html>
I wrote some dummy css. Instead of a tag I got escaped characters. How can I add a div tag instead?
.HeaderName:after{
content: "<div class=\"Name2\">text</div>";
}
.Name2 {
color: red;
}
The content declaration cannot add tags to the page (tags are structural); additionally, CSS is meant for presentation changes, not structural content changes.
Consider using jQuery, instead, such as:
$(".HeaderName").after("your html here");
If you need that extra tag only to make the added text red, just do this:
.HeaderName:after{
content: "text";
color:red;
}
Tested on Chrome.
You can't insert tags using content: in CSS. Here is the relevant part of the spec; see the 'content' property in the CSS 2.1 spec.