I have a form where the default values disppear on focus and reappear on blur if the user did not input anything. The color of the text changes to a darker black when the user types in something, and if the textbox goes into blur with user-inputted text.
Problem: I cannot get the font to change to a darker black when the user types something in, or when the textbox goes into blur with user-inputted text without using !important. Did something go wrong that requires me to use !important, or is there a better way?
HTML Code
<div id="splash_register_form">
<input type="text" name="register_first_name" class="splash_register_short_input" title="First Name" />
<input type="text" name="register_last_name" class="splash_register_short_input" title="Last Name" />
<input type="text" name="register_email" class="splash_register_long_input" title="Email" />
<input type="text" name="register_password" class="splash_register_long_input" title="Password" />
</div>
jQuery Code
$(".splash_register_short_input, .splash_register_long_input").each(function() {
$(this).val( $(this).attr('title') );
});
$(".splash_register_short_input, .splash_register_long_input").focus(function() {
if($(this).val() == $(this).attr('title')) {
$(this).val('');
}
});
$(".splash_register_short_input, .splash_register_long_input").blur(function() {
if($(this).val() == '') { // If there is no user input
$(this).val($(this).attr('title'));
$(this).removeClass('splash_register_have_userinput');
} else { // If there is user input
$(this).addClass('splash_register_have_userinput');
}
});
CSS
.splash_register_long_input {
height: 22px;
width: 300px;
padding: 3px 0px 3px 8px;
margin: 0px 1px 2px 0px;
float: left;
font-family: Arial, Sans-Serif;
font-weight: bold;
border: 1px solid #5cb5ee;
}
.splash_register_long_input:focus {
border: 2px solid #5cb5ee;
width: 298px;
height: 20px;
}
.splash_register_short_input{
height: 22px;
width: 144px;
padding: 3px 0px 3px 8px;
margin: 0px 1px 2px 0px;
float: left;
font-family: Arial, Sans-Serif;
font-weight: bold;
border: 1px solid #5cb5ee;
}
.splash_register_short_input:focus {
border: 2px solid #5cb5ee;
width: 142px;
height: 20px;/
}
.splash_register_short_input:focus, .splash_register_long_input:focus {
color: #333 !important;
-webkit-box-shadow:0 0 10px #5cb5ee;
-moz-box-shadow:0 0 10px #5cb5ee;
box-shadow:0 0 10px #5cb5ee;
outline: none; /* prevent chrome from adding border */
}
#splash_register_form input {
color: #AAA;
}
.splash_register_have_userinput {
color: #333 !important;
}
I see what happened. IDs have higher precedence in CSS even if they appear before a class style rule to the same element. You can either leave !important there or change the last rule to this:
#splash_register_form .splash_register_have_userinput {
color: #333 !important;
}
The !important rule provides a way to have the styles you feel are most crucial always applied. A style that has the !important rule will (in most cases) be applied no matter where that rule appears in the CSS document.
Here is one of the solution of your code.
The reason why the input word back to gray because you use id selector #splash_register_form input to apply gray color to blur texts, but class selector .splash_register_have_userinput to apply user input texts.
And cause the id selector's priority is higher the class selector. So while your focus leave the input, the gray color came back and override the class selector.
To solve the situation, you can add a class name to your div (in case you have other divs and inputs at the same page), apply the gray color using class selector, and use more precise selector like input.className to apply the black color.Then you can remove your !important from your code.
Related
Here is what happening. I have a simple button in HTML with a simple action in JS.
Button in HTML:
<button class="btn_open_calc">Open Culculator</button>
Styles in CSS:
.btn_open_calc {
background-color: rgb(232, 209, 237);
width: 200px;
height: 40px;
border-radius: 10px;
font-size: medium;
}
Response in main.js:
var btn_Open_Calc = document.querySelector('.btn_open_calc');
btn_Open_Calc.addEventListener("click", funcOpenCalc);
function funcOpenCalc() {
Modal_Container.style.display = 'flex';
}
But when I press the button here is how it starts to look:
When I press on any other place it disappears. But I want to get rid of it at all so it won't appear.
Add outline: none; or outline: 0;(outline 0 vs none difference) to the button's css to remove the outline.
But as MDN notes,
Accessibility concerns
Assigning outline a value of 0 or none will remove the browser's
default focus style. If an element can be interacted with, it must
have a visible focus indicator. Provide obvious focus styling if the
default focus style is removed.
You can add this to your CSS to get rid of it if you really want.
button:focus {
outline: none;
}
example:
var btn_Open_Calc = document.querySelector('.btn_open_calc');
btn_Open_Calc.addEventListener("click", funcOpenCalc);
function funcOpenCalc(){
Modal_Container.style.display = 'flex';
}
.btn_open_calc{
background-color: rgb(232, 209, 237);
width: 200px; height: 40px;
border-radius: 10px;
font-size: medium;
}
button:focus {
outline: none;
}
<button class="btn_open_calc">Open Culculator</button>
I have a button with javascript attached. When you click the button a hidden box will appear, when you click another one, the first box gets replaced with the second and so on. When my button is active, when the box is visible, it gets a shadow around. And i don´t want that! I tried to use the following css codes:
.nav > button{
width: auto;
font-family: 'OpenSansBold';
color: #000;
padding: 3px;
border: none;
margin-right: 10px;
margin-top: 5px;
font-size: 15px;
text-align: left;
background-color: #fff;
}
button:hover{
cursor: pointer;
border: none;
color: #7b1a2c;
}
button:visited{
font-family: 'OpenSansBold';
box-shadow: none;
}
button:active{
box-shadow: none;
}
But with no luck. Is there another CSS code for buttons when its active?
I have no clue about javascript, just copy pasted this thing. Maybe this is something that can be fixed in the js code? Just in case, I can show you guys:
$('div.box').slice(1).addClass('hidden');
$('.nav').children('button').on('click', function(){
// console.log('klikk');
$(this).data('content');
$('.box').not('hidden').addClass('hidden');
$( $(this).data('content')).removeClass('hidden');
});
Maybe you talk about outline property or :focus pseudo-class?
Try this one:
button:active, button:focus {
box-shadow: none;
outline: 0;
}
To give you a working example, play around with the following snippet, I think this behaves like you would want it to.
To completely remove the shadow, just remove the second JS rule.
// :active rules
$('button').on('mousedown', function () {
$(this).css('box-shadow', 'none');
});
// :visited rules
$('button').on('mouseup', function () {
$(this).css('box-shadow', '10px 10px 5px #888888');
});
button {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<body>
<button>test</button>
</body>
I am adding a class to an image.
.bbbLink img {
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
On hover I add this,
.bbbLink img:hover {
background-color: rgba(0, 0, 0, 0.1);
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
For active I am doing this,
.bbbLink img:active {
outline: 1px solid #111 !important;
border-top: 1px solid #555 !important;
padding: 10px !important;
background: #333 !important;
}
Since I am adding the active class to an image and you cannot do this because it is a self closing element I am using jquery to handle adding the active state like this,
<script>
(function($) {
$('.bbbLink').click(function() {
$(this).toggleClass('active');
});
})( jQuery );
</script>
Everything works perfectly, even when checking the dom after clicking the element my active class appears.
<a id="wrapbbb" class="bbbLink active" href="img.jpg" target="_blank">
<img src="content/uploads/-2-018.jpg" alt="BBB">
</a>
The problem is that when I press the mouse down and click, active state shows and the styling takes effect but when I release the click the active state styling goes away...
The active class is still in the dom but the styling effects revert back to the class without the active state.
Why is this happening?
Er... You need to give CSS like this:
.bbbLink img.active {
When you have :active, it is a state, active / mousedown state, not a class. Hope this is not a typo.
I am trying to make an input box that looks like it has a placeholder that says username, but when the box is selected it moves and changes to a darker color to resemble a label. The problem I am having is whenever I hover over the box it will complete the animation but then immediately undo it, putting the text back to look like a placeholder. I also want to make my Javascript/JQuery code so that if the box has any typing in it that the text will stay as a label and not go back to being the placeholder even without being selected. My other problem is that I do not know the JQuery command to tell if an input box is selected or not. I supply all my code below along with a link to CodePen which has the
<div id='inputdiv'>
<input id='textinp'>
</div>
<h4>Username</h4>
#textinp {
border: none;
width: 200px;
height: 30px;
font-size: 20px;
margin-left: 5px;
font-family: 'Roboto', sans-serif;
background: rgba(0, 0, 0, 0);
}
input:focus {
outline: 0;
}
#inputdiv {
width: 200px;
height: 32px;
margin: 0 auto;
margin-top: 70px;
border-top: 1px solid black;
border-right: none;
border-left: 1px solid black;
border-bottom: none;
z-index: -2;
}
h4 {
font-family: 'Roboto', sans-serif;
font-size: 20px;
position: relative;
bottom: 53px;
left: 575px;
color: #C2C2C2;
z-index: -1;
}
$(document).ready(function() {
$("#inputdiv").mouseenter(function() {
$("h4").animate({
left: '470px',
color: '#00000'
});
if ($('#textinp').val() == '') {
$("h4").animate({
left: '580px',
color: '#C2C2C2'
});
}
});
});
CodePen
Try using hover() method instead. As first parameter define function to be executed on hoverIn (on mouse entering), as second - function to be executed on hoverOut (on mouse leaving).
Here's your example updated:
http://codepen.io/anon/pen/LprybQ
I want some css code and javascript to my textbox and a button, For First time my button is hide
when my mouse goes to the text box it height should be increased and then i remove my mouse on another place that that increased size should be kept.
when my mouse goes to the textbox a button should be visible and then i remove my mouse on another place that button should be visible.
This is CSS file now i am using, but i want to make some changes for this if i want to get upper things.
#TextBox1 {
background: #FFFFFF;
color: #000000;
height: 30px;
width:510px;
padding: 6px 15px 6px 35px;
border-radius: 5px;
box-shadow: 0 1px 0 #ccc inset;
transition: 500ms all ease;
outline: 0;
}
#TextBox1:hover {
height: 100px;
}
Post button css
#Post {
background: rgb(66, 184, 221); /* this is a light blue */
border-radius: 20px;
}
how to change this css files as i want? I think I need a javascript file also to hide and visible post button
Put the textbox and the post button in one div and use the following CSS.
First HTML
<div class="textBoxWrapper" >
<textarea class="textbox_1" id="TextBox1" ></textarea>
<input type="button" id="post" value="Post me"></input>
</div>
Now the CSS
#TextBox1 {
background: #FFFFFF;
color: #000000;
height: 30px;
width:510px;
padding: 6px 15px 6px 35px;
border-radius: 5px;
box-shadow: 0 1px 0 #ccc inset;
transition: 500ms all ease;
outline: 0;
}
#TextBox1:hover {
height: 100px;
}
#Post {
background: rgb(66, 184, 221); /* this is a light blue */
border-radius: 20px;
display: none;
}
.textBoxWrapper:hover > #Post {
display: block;
}
Pure CSS-solution for question number 2.
For number 1 I would use JavaScript
.TextBox1Large {
height: 100px;
}
<asp:textbox ID="TextBox1" runat="server"></asp:textbox>
<script>
document.getElementById("<%=TextBox1.ClientID %>").addEventListener("mouseover", changeHeightOfTextBox, false);
function changeHeightOfTextBox() {
document.getElementById("<%=TextBox1.ClientID %>").className = "TextBox1Large";
//Delete the event, since it is needed only once.
document.getElementById("<%=TextBox1.ClientID %>").removeEventListener("mouseover", changeHeightOfTextBox, false);
}
</script>
I would say instead of using the css hover try adding a class to the textbox1 when you detect the focus event for the the textbox1 using jquery. Then at the same time use jQuery to make the button visible.
Example code below:
//CSS
#TextBox1Clicked{
Height: 100px;
}
//jQuery
$(document).on('focus', '#TextBox1', function(){
//Show the button
$('#yourButtonId').show();
//Add the css class to the text box to make it taller
$('#TextBox1').addClass('TextBox1Clicked');
});
Resources:
jQuery '.On':
http://api.jquery.com/on/
jQuery 'addClass':
http://api.jquery.com/addclass/