I'm trying to apply some CSS to a bootstrap input field, but somehow I couldn't see the box-shadow. When I inspect the element in Chrome, it seems that CSS box-shadow is applied to that field and CSS of form-control was over written. Is there something wrong with how I defined the input field? Could someone please help? Many thanks!
#amount {
min-width: 56px;
width: 224px;
height: 40px;
border-radius: 3px;
background-color: #ffffff;
box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.12);
border: solid 1px #e2e2e2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-4 col-lg-offset-4">
<div class="input-group">
<span class="text-center input-group-addon" id="sizing-addon2">Payment amount</span>
<input class="form-control" type="text" id="amount" value="1.00">
</div>
</div>
The inset box-shadow seems to be working on your example, it's just very faint because of the 0.12 in your colour declaration. Does it help if you increase the opacity, for example set it to 0.5 instead of 0.12?
Initial response:
The ID in your CSS (#payment_amount) doesn't match the ID in your HTML (#amount) so it won't be applied.
Would it be better to apply the style to .form-control, or are you only wanting to apply it to this one specific field?
box-shadow: -1px 3px 12px rgba(187, 195, 197, 0.6);
you can use this.
Just need to add more hierarchy to the rule, and then it won't be over written by the Bootstrap styles...
Write it like this...
box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.12) !Important;
That should be enough.
Related
Here is my issue. I have 2 css classes, my elements can have either
.classA{box-shadow:inset -2px 0px 0px 0px rgba(63,191,31,1);}
.classB{box-shadow:inset -2px 0px 0px 0px rgba(204,29,29,1);}
I wish to use a third class to change the inset but not the color
.classC{box-shadow:inset -10px 0px 0px 0px;}
That works (the shadow is here) but the color turns black. I would like to keep my original color.
How to change the shadow properties using CSS ONLY without losing the color?
Box-shadow cannot be broken into parts like for example border can. But a trick you can use is that box-shadow inherits its color from the color attribute of the element.
<div class="box">
</div>
<div class="shadow box">
</div>
.box{
box-shadow: 0 0 10px;
width: 100px;
height: 100px;
margin: 10px;
background: #fff;
}
.box.shadow{
color: rgba(255,0,0,.3);
}
http://jsfiddle.net/82z8r73o/
I have a dropdown inside a form, but when using Chrome when the dropdown is closed and has focus it shows a blue border.
I would like to remove it or do change it as the last field that I show in the attached picture, dark green line with a light green halo.
I've tried several suggestions that I saw here as:
*:active{
outline: none !important;
}
*:focus{
outline: none !important;
}
they worked when the dropdown is expanded but not when is closed.
I don't know much of css, but here is an excerpt of my html, although I'm using wicket and I'm not sure how the component is rendered in the browser html.
<div class="col-sm-4">
<span><label class="control-label" wicket:for="valid"><wicket:message
key="filter-valid-label">[Valid]
</wicket:message></label></span>
<select wicket:id="valid" class="form-control selectpicker">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
</div>
This probably has to do with bootstraps :focus on .form-control
This is the css from bootstrap
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
Use
.form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
Add this anywhere in your CSS code, replacing rgba(0,100,0,.6) with whatever shade of green you'd like :
.form-control.selectpicker:focus {
border-color : rgba(0,100,0,.6);
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0,100,0,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0,100,0,.6);
}
It will override the Bootstrap code on .form-control:focus that's responsible for the blue border-color and box-shadow on your dropdown!
See this Fiddle for a demo!
Try this:
.form-conrol:focus{box-shadow:none:border-color:none;}
I have 3 elements(p elements) inside a row class ( with col-md-4 each). Now I want to pass a class ( "well" ) on hover, so that whenever mouse hovers they each element can have an individual well class. I can do it without hover but with hover, I am struggling. Can anybody help?
use jquery to apply the class on hover:
$('.myText').mouseenter(function(){
$(this).addClass("well");
});
$('.myText').mouseleave(function(){
$(this).removeClass("well");
});
Use CSS
I would recommend you to do this in CSS alone. All you want is to have the well effect on your p tag when user hovers the mouse on the element. Instead of using Jquery and adding removing the classes its better if you pull out the bootstrap well style definition and use it on your p:hover rule.
The bootstrap definition of well is as below.
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
All you have to do is to add this custom CSS rule in your page
.YourMainDivClass p:hover {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
Here the idea with YourMainDivClass is that your p tag must be a part of div (as understood by your question), And you don't want this effect to work on all the p tags in your page. So to restrict the effect to specific group I have used the parent class in the selector.
Hope this helps!!
You can simply use jQuery's mouseenter and mouseleave functions:
$('p').mouseenter(function() {
$(this).addClass("well");
});
$('p').mouseleave(function() {
$(this).removeClass("well");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Item</p>
</div>
<div class="col-md-4">
<p>Item</p>
</div>
<div class="col-md-4">
<p>Item</p>
</div>
</div>
</div>
Of course you should change the selectors for your needs.
I have the following HTML
<div id="borderContainer" class="scViewer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false">
<div id="buttonPagerContentPane" data-dojo-type="dijit/layout/ContentPane" align="center" data-dojo-props="region:'bottom'" class="buttonContentPane">
<div id="buttonPagerTitle" class="ContentPaneTitle">
Sheet Selector <br>
</div>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="PreviousButtonAttachNode" id="previousButton" class="scViewButtonContent buttonContentPane">
Previous
</button>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="NextButtonAttachNode" id="nextButton" class="scViewButtonContent">
Next
</button>
</div>
</div>
And the following CSS:
.scViewer {
color: #2546ff;
}
.scViewer .buttonContentPane {
padding: 5px 5px;
color:#FFFFFF;
border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.scViewer .ContentPaneTitle{
color: #2546ff;
font-weight: bold;
}
.scViewer .buttonContentPane .scViewButtonContent{
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
text-decoration: none;
}
My problem is that the two previous/next buttons don't inherit the buttonContentPane class without explicitly defining it again, even though it is within the parent buttonPagerTitle <div> ..To demonstrate this above, I explicitly define the nextButton without the buttonContentPane property, and the resultant HTML in the dev tools does not contain the buttonContentPane in the defined, but the inherited section contains buttonContentPane with its properties grayed out:
My overall goal is to boilerplate CSS code for re-use within my organization. Is my syntax wrong? Did I structure the selectors improperly? Thank you for your time
I assume you want your 'next' and 'previous' buttons to inherit these properties:
.scViewer .buttonContentPane {
padding: 5px 5px;
color:#FFFFFF;
border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
Unfortunately (for you), not all properties are inherited by an element's children/descendants, and not all elements will inherit from their parents/ancestors. You're experiencing both problems.
Padding, border-radius, and box-shadow aren't automatically inherited: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
Color usually is inherited but buttons are form elements, and form elements don't inherit properties from their parents: Why are CSS-styles not inherited by HTML form fields?
You'll need to either directly add the class to the buttons if you want them to be styled correctly (as you mentioned you did in your question), or you'll need to write rules in your CSS that explicitly state the buttons should inherit properties from their parents.
The following is a simple example showing how to explicitly tell an element to inherit properties from its parent. Click "Run code snippet" to see the resulting buttons.
.wrapper1,
.wrapper2 {
color:red;
padding: 20px;
box-shadow: 0 0 3px rgba(0,0,0,0.4);
border-radius: 10px;
margin: 10px;
width: 100px;
}
.wrapper2 button {
color: inherit;
padding: inherit;
box-shadow: inherit;
border-radius: inherit;
border: none;
}
<div class="wrapper1">
This button doesn't inherit.
<button>My button</button>
</div>
<div class="wrapper2">
This button does inherit.
<button>My button</button>
</div>
I want to update this file input to look like the image I've attached.
Currently I have this view:
http://davis-design.de/marktadresse/mein-profil.html
But I would like it to look like the following:
My current attempt:
<span class="btn">
<span class="fileupload-new">Bild auswählen</span>
<span class="fileupload-exists">Ändern</span>
<input type="file" name="bild" id="bild">
</span>
How would I go about styling the default file input element?
Just as a word of warning from past experience, certain methods of styling a file upload doesn't always work cross browser, and has given me some gray hair. But I believe the below solution should work for most cases
Based on the answer from #BjarkeCK
https://stackoverflow.com/a/9182787/1105314
Fiddle
http://jsfiddle.net/D9T4p/1/
Markup
<div style="padding:100px;">
<div class="uploadButton">
BILD AUSWÄHLEN
<input type="file" />
</div>
</div>
Javascript
$(function() {
$(".uploadButton").mousemove(function(e) {
var offL, offR, inpStart
offL = $(this).offset().left;
offT = $(this).offset().top;
aaa= $(this).find("input").width();
$(this).find("input").css({
left:e.pageX-aaa-30,
top:e.pageY-offT-10
})
});
});
CSS
.uploadButton input[type="file"] {
cursor:pointer;
position:absolute;
top:0px;
opacity:0;
}
.uploadButton {
position:relative;
overflow:hidden;
cursor:pointer;
/*** (Copied from the link you supplied) ***/
text-transform: uppercase;
font-size: 13px;
font-family: 'Roboto',Arial,sans-serif;
padding: 8px 22px;
display: inline-block;
-moz-border-radius: 2px;
border-radius: 2px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1) inset;
color: #FFF;
background-color: #2561BA;
}
Update
CSS only solution:
http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
You can use jqtransform here to customize your input type here
There is a easy css-only solution. you don't need any javascript for it. so - just dont.
The keyword of the solution is: <label>.
Label? - Yes a label!
The simple HTML Element. You can easily style an <label> element.
Here is a sample:
HTML
<label for"foo"></label>
<input type="file" id="foo"/>
CSS
label {
cursor: pointer;
}
#foo {
height: 0.1px;
width: 0.1px;
z-index: -1;
}
You dont use the input element itself. You'll use the label instead. If you click on the label, you'll get referenced to the 'real' input element and its functionality.