I've created a sliding button with css using the :after element.
The problem I'm having is that my "input" buttons don't seem to use the :after element and they don't slide like my normal buttons.
<input type="submit" value="<?php echo $button_login; ?>" class="btn btn-primary" />
Is there any way that I can use the :after element on this or is there any possible workaround?
edit: To add a little more info here is the css for the button.
.btn-cart {
color: #3498db;
}
.btn-cart:hover,
.btn-cart:focus,
.btn-cart:active {
background: none;
border-color: transparent;
}
.btn-cart:hover:after,
.btn-cart:focus:after,
.btn-cart:active:after {
width: 100%;
}
.btn-cart:after {
background: #3498db;
}
input.btn-cart:hover,
button.btn-cart:hover,
input.btn-cart:focus,
button.btn-cart:focus,
input.btn-cart:active,
button.btn-cart:active {
background: #3498db;
}
I have tried the ::after but that doesn't work :(
The button does not slide on any browser because the :after element isn't working on any input buttons.
Any help will be much appreciated :)
Thanks,
Richard
I found a solution myself. This works for my input buttons, I changed "input" to "button" in my original code and added the word "login". See working code below,
<p><button type="submit" value="<?php echo $button_login; ?>" class="btn btn-primary">Login</button></p>
Related
I am trying to integrate an HTML 5 required checkbox into a form:
<p>
<input class="checkbox" type="checkbox" required name="terms"> By submitting you agree to the processing of your data for the purpose of processing your request/booking.
<br>
<a href="/en/datenschutz.php" target="_blank">
<u>Privacy Policy</u>
</a>
</p>
It is not displaying in a single browser. I haven't had this problem with other sites before, this site is running Bootstrap v2.2.2.
I found some possible solution with labels which didn't work.
Your Style.css file has this rule:
input[type="checkbox"] {
display: none;
}
Delete it and you will see your checkbox.
If you need that rule for whatever reason and you only want to override it for this particular checkbox, then you'll have to add another CSS rule to override it. Obviously, adding an inline style will do the job, but it might be not the best way to go:
<input class="checkbox" type="checkbox" required name="terms" style="display: inline-block;">
Your style.css might contain the appearance css property. This is used to display an element using platform-native styling, based on the operating system's theme. Look up : https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
your code might contain a css rule such as:
input {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}
if you wanna keep this property and change the checkbox specifically then use :
input[type="checkbox"] {
appearance: checkbox !important;
}
You can use both css.
But here
style="display: inline-block;"
inside input type are override display: none;
input.checkbox {
display: inline-block;
}
/*input[type="checkbox"] {
display: inline-block;
}*/
<p>
<input class="checkbox" type="checkbox" required name="terms">By submitting you agree to the processing of your data for the purpose of processing your request/booking.
</p>
<a href="/en/datenschutz.php" target="_blank">
<u>Privacy Policy</u>
</a>
I have the following HTML
<label class="item formulario item-input item-floating-label" ng-class="{'has-error': registroForm.nombre.$invalid && registroForm.nombre.$dirty, 'valid-lr': registroForm.nombre.$valid && registroForm.nombre.$dirty}">
<span class="input-label">Nombre</span>
<input type="text" placeholder="Nombre" name="nombre" ng-model="vm.nombre"
pattern="[A-Za-z'áéíóú ]+"
ng-minlength="2"
ng-maxlength="30"
required>
</label>
I need to set the following style:
label.item.formulario {
border-style: none none solid none;
border-color: darkblue;
}
But the custom style is not taking effect. If I remove my custom name ".formulario" from my CSS selector and also from the class list in my HTML, the style works perfect BUT it modifies the wholes label with an item class. I just need to modify a specific label, this is the reason what I'm trying to create a custom class.
What's wrong?
Thanks for helping!
I've just tested it here and the style does take effect :
https://jsfiddle.net/8eo8crz1/
label.item.formulario {
border-style: none none solid none;
border-color: darkblue;
}
If you want to have a unique custom style for each label, you'll need to use an id instead of a class (or in addition to the classes you're using).
I found this tutorial, which introduces a transition that I need for my for my page to slide it down with a single click using radio buttons.
The idea is, that my page's width and height are 100% and each click moves the page "off the canvas" using translateY (found at tyyli.css line 663) just like in the tutorial provided.
After all efforts I can't get it work if I put the first radio button inside st-scroll div. I have to put it directly under site-wrapper to get it work but now is looks horrible, because it wont move along with the page and just hides under st-scroll. Also the dot putted outside st-scroll DIV causes the whole page to be 100px lower than it thould be.
This is the top radio button.
<input type="radio" name="radio-set" id="st-control-1"/>
Try to move this code from the first <secton> to just under site-wrapper like this
<div class="menu">
</div>
/*TRY TO PUT IT JUST BELOW THIS LINE AND SEE THE PROBLEM*/
<input type="radio" name="radio-set" id="st-control-1"/>
<div class="st-scroll">
and you will see the problem. My idea is, that this has something to do with the Z-index, but i might be wrong. I want to place both buttons inside st-scroll.
My site is www.kasperikoski.fi
You can use labels to control radio buttons, so you can put the labels wherever you want and have more control over styling them, as well as hide the radios. However, the radios must be siblings of the element you want to control or one of its ancestors if you want to use the ~ or + combinators.
DEMO
.st-scroll {
padding: 1em;
background-color: tomato;
transition: transform 500ms ease;
}
input[name="radio-set"] {
display: none;
}
label {
display: block;
margin-bottom: 0.5em;
padding: 1em;
background-color: lightgray;
border: solid 1px gray;
border-radius: 0.5em;
}
input[type="radio"] + label {
display: inline-block;
}
#st-control-1 ~ .st-scroll {
transform: translateY(100%);
}
#st-control-1:checked ~ .st-scroll {
transform: translateY(0);
}
<input type="radio" id="st-control-1" name="radio-set" checked="checked" />
<div class="st-scroll">
<label for="st-control-1">I'm a label in .st-scroll but am linked to #st-control-1 so I can control my parent</label>
<input type="radio" id="st-control-2" name="radio-set" />
<label for="st-control-2">I'm a label linked to the other radio</label>
</div>
The reason that the links only work outside the div is because the effect is driven by the CSS: #st-control-#:checked ~ .st-scroll which means it looks for a sibling DOM element with .st-scroll class. You need to either have it on the outside of the scroll element or rely on javascript to trigger the same transforms by adding/removing certain classes.
I could see it being done various ways, although the fastest (me being lazy and all) would be something like:
In html:
<input type="radio" name="radio-set" id="st-control-1" value="scroll-1">
... further down
<input type="radio" name="radio-set" id="st-control-2" value="scroll-2">
In a script including jquery to save time...:
$(document).ready(function(){
var scroll = $('.st-scroll');
$('input[name="radio-set"]').click(function() {
var which = $(this).attr('value');
var prev = scroll.data('current');
if(prev) scroll.removeClass(prev);
scroll.addClass(which)
.data('current',which);
});
});
And finally the css:
.scroll-1 {
transform: translateY(-100%);
}
.scroll-2 {
transform: translateY(0);
}
I have this button:
<input type="submit" value="#Translator.Translate("PAYOUT")"
class="btn-block secondary-button save-changes padding-8"
ng-disabled="PayoutEnabled==false" ng-click="PayOut()" />
But even when it's disabled it has the same class as it's enabled, just not clickable. I want to change background when it's disabled so that user can see that button, is disabled. How can I do that? Do I need some ng-disabled CSS class or there is some other way?
What Toress answered should work fine but you don't need the help of AngularJS here at all (a native implementation & usage is always best).
You can make use of CSS3 since you already have a class on it. Example:
input.save-changes {
/* some style when the element is active */
}
input.save-changes[disabled] {
/* styles when the element is disabled */
background-color: #ddd;
}
Edit: You can immediately test it on this page of StackOverflow. Just inspect the blue button element and put the disabled attribute and see it's CSS.
.save-changes {
background-color: red;
padding: 7px 13px;
color: white;
border: 1px solid red;
font-weight: bold;
}
.save-changes[disabled] {
background-color: #FF85A1
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="PayoutEnabled = true">
<a href="#" ng-click="PayoutEnabled = !PayoutEnabled">
{{PayoutEnabled ? 'Disable' : 'Enable'}} the below button</a>
<br>
<br>
<input class="save-changes" type="submit" value="PAYOUT" ng-disabled="PayoutEnabled == false" />
</div>
use ng-class
<input type="submit" value="#Translator.Translate("PAYOUT")" class="btn-block
secondary-button save-changes padding-8" ng-disabled="PayoutEnabled==false"
ng-click="PayOut()" ng-class="{'diabled-class': !PayoutEnabled}" />
this will add css class diabled-class to the input when PayoutEnabled is false (!PayoutEnabled is true).
AngularJS adds pseudo-class disabled when ng-disabled is false so i think here is the simplest solution to refer to disabled button :
button:disabled {
color:#717782;
}
In case you are using Bootstrap and a more recent Angular version than AngularJs you can ovverride the default style adding this to the styles.css file
.btn.disabled, .btn:disabled {
opacity: .35 !important;
background-color: gray !important;
}
The higher the opacity the darker or more solid the color will be.
I would like to blend a static value next to a simple text input form.
so it will look like, for example:
[static]What do you think about[/static] [user info]...[/userinfo].
i've came up with this:
<p style="display:inline;">What Is It Like To Be</p>
<div>
<input name="post_title" type="text" id="topic" class="input" size="50" maxlength="100" tabindex="1" placeholder="<?php echo $_GET["pr"];?>" style="padding-left:45px; " style="display:inline;"/>
</div>
So, I do get the static 'prefix' inlined with the input form, but i want to make the static text look 'like' it is part of the form. Like a static 'placeholder' tag.
Thanks guys :)
You could try something like this:
HTML
<label class="input-stretch">prefix_<input type="text" /></label>
CSS
.input-stretch {
border: 1px solid #222;
padding: 0.1em;
}
.input-stretch input {
border: none;
outline: none !important;
}
Basically remove the input border and outline, then add one to the label or whatever other element you want to wrap it in.
outline: none !important; may also need to be applied on active/focus states, iirc chrome gives it some nice blue outline??
DEMO