I am using bootstrap3 and I would like to use multiple inputs-group-addon together.
If I try to do so, unfortunately I get in some elements a 2px border instead of 1px.
Bootply
What kind of CSS style I could use to solve my problem?
Thanks
This is a common known problem in bootstrap, you can overcome this problem by overriding '.inputs-group-addon' class.
bootply
Example
.input-group-addon:first-child + .input-group-addon:last-child {
border-left: 1px solid #ccc;
}
.input-group-addon:not(:first-child):not(:last-child) + .input-group-addon:not(:first-child):not(:last-child) {
border-left: 0;
}
.form-control + .input-group-addon:not(:first-child):not(:last-child) {
border-left: 0;
}
.input-group-addon:not(:first-child):not(:last-child) + .form-control {
border-left: 0;
}
Also there is an issue in bootstrap.
Add following CSS:
.input-group-addon{
border-left: 0;
}
This will work. See this.
Related
I am just wondering if there is any way to style md-checkbox
like given below:
Codepen code for input checkbox
Note: I just wanna change the border color of the checkbox.
I have tried following way but didn't succeed :
SCSS
$dal-green: #45ba8e;
.check{
md-checkbox {
border: 2px solid $dal-green;
}
}
HTML :
<div class="check">
<md-checkbox></md-checkbox>
</div>
I have searched online but no luck . If any body can give css to override the border color it would be great help. Thanks In advance.
Try this,
.check{
md-checkbox {
border: 2px solid #009688;
}
}
Try something like this :
md-checkbox .md-icon {
border-color: green;
}
in new version you should use with underscore _md-icon:
md-checkbox.md-checked ._md-icon {
background-color: transparent;
}
md-checkbox ._md-icon {
border-color: white;
}
I am new to kendo UI and hence facing difficulty in fixing this issue . I have a Kendo Code which has a tab strip and its contents .The Problem is a red border is applied for the entire content> I tried to remove it using this styling
<style>
div.k-tabstrip {
background: none transparent;
border-width: 0;
}
div.k-tabstrip .k-tabstrip-items {
padding: 0;
}
div.k-tabstrip .k-content {
margin: 0;
}
</style>
but this didn't work
Apply like below.
div.k-tabstrip>.k-content
{
border-width:0 !important;
}
I have the following code to style custom scrollbars, but when the scrollbar is not needed because the content is not very long, I would like to hide the scrollbar. Is this possible?
Here's the code I have so far...
.myscroll::-webkit-scrollbar {
width: 15px;
}
.myscroll::-webkit-scrollbar-track {
border-radius: 3px;
background-color:#D4D4D4;
}
.myscroll::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color:#0085bf ;
}
Assuming that the element is having class myscroll, you can try following css
.myscroll{
overflow:auto;
}
It might solve your issue.
How can I simplify this SASS so that I only write .question-sector-answer the once? I need to apply different styles to the .question-sector-answer if the parent div has a class of both .question-row and .question-review. This currently seems unwieldy and I'm sure could be simplified and made more elegant:
.question-row {
border-bottom: 1px solid #ddd;
&.question-review {
.question-sector-answer {
padding-top: 30px;
}
}
.question-sector-answer {
padding: 15px;
}
}
I don't see how you can simplify it. You need to use 2 different styles for .question-sector-answer under different parents. Since it's impossible in css to access parent selector, you have no choice but do what you did (well, in SASS you kind of can - see below). Although my personal preference to always put more generic selectors on top and more specific ones to the bottom like so:
.question-row {
border-bottom: 1px solid #ddd;
.question-sector-answer {
padding: 15px;
}
&.question-review {
.question-sector-answer {
padding-top: 30px;
}
}
}
So in SASS you can access parent selector with & using it in certain way, but I don't think you can recreate your styles with it, the best I could come up with was this but it looks uglier than your original way of doing it, but you're welcome to play with it:
.question-row {
border-bottom: 1px solid #ddd;
}
.question-sector-answer
{
.question-row & {
padding-top: 15px;
}
.question-row.question-review &
{
padding: 30px;
}
}
You can read more about accessing parent selectors with & here
.question-row {
border-bottom: 1px solid #ddd;
}
.question-sector-answer {
padding: 15px;
.question-review & {
padding-top: 30px;
}
}
De-nesting here does two things: (1) creates terser, more flexible CSS and (2) allows the parent & selector. To compensate for the decrease in OOP, we slightly indent to imply subjugation. But in SASS you want to avoid the temptation to nest when not totally necessary, because nesting for OOP's sake tends to create more problems than it solves.
I have this element:
<span class="input" tabindex="1">€<input type="text"></span>
With this CSS:
.input {
background: #FFF;
padding: 5px 10px;
}
.input input {
border: 0;
background: #FFF;
padding-left: 5px;
}
.input input:focus {
outline: none;
}
.input:focus {
outline: 1px solid yellow;
}
My problem is that if I click on the border of the element or on the € symbol, the element is outlined, but if I click inside the input box, the element is not outlined.
There is a CSS-only way to fix this problem?
PS:
If I wanted a JS solution I would used this as I'm doing at the moment:
$(".input input").focus(
function() {
$(this).parent().addClass("focus");
}).blur( function() {
$(this).parent().removeClass("focus");
}
);
But I'm looking for a pure-css solution.
As far as I know it is not possible with plain CSS. What you want is a "parent" selector, which doesn't exist in CSS2 or CSS3. According to this answer there is a possibility to define a subject in the CSS4 specs, until these are available in all (major) browsers you will have to use JavaScript.
A jQuery way to do it could look like this:
$('.input input').focus(
function() {
$(this).parent().css("outline", "1px solid yellow");
}).blur(
function() {
$(this).parent().css("outline", "none");
}
);
jsFiddle