I'm trying to remove top, right and left borders for text input fields, using bootstrap 3. My selector is:
input[type="text"] {
border-top: 0;
border-right: 0;
border-left: 0;
}
It's still showing (in chrome) a slight thin line.
I'm not sure how to get that ghost line to disappear
You did remove the border from top left and right. That "ghost line" you see, it is the inset shadow. You can remove that as well
input[type="text"] {
border-top: 0;
border-right: 0;
border-left: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
and if you want to remove that when a user "focuses" the field
input[type="text"]:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
Write this in your css file.
input {
border: none;
}
If it is not working please share your html code.
If your form uses tags <fieldset>, try to remove their borders too:
fieldset {
border: 0;
}
Related
I've been trying to figure out how to remove the highlight color from my mobile menu. In the image below you can see the white highlight around home. The highlight moves to whatever is clicked on. When a new page opens, the highlight is just a white line below the 'close' X in the top right.
https://i.stack.imgur.com/CT4Zd.png
https://i.stack.imgur.com/IYp2Q.png
I've been trying to set the border to 'none' for links on the menu or just to turn the border color to 006680 to match the background of the menu. Nothing seems to work.
.sidr-class-dropdown-menu li a, .sidr-class-fs-dropdown-menu li a
{
padding: 7px 20px;
font-family: "Alegreya SC";
font-size: 20px;
font-weight: 500;
text-align: center;
line-height: 1.5;
height: 100%;
border: none;
border-color: #006680;
}
.sidr-class-dropdown-menu li a::selection, .sidr-class-fs-
dropdown-menu li a::selection {
border: none;
border-color: #006680;
}
.sidr-class-dropdown-menu li a:active, .sidr-class-fs-dropdown-menu
li a:active {
border: none;
border-color: #006680;
}
.sidr-class-menu-link {
border: none;
border-color: #006680;
}
I know there is an option to set an image as tree background and make it to repeat if needed.But i want to draw horizontal lines in the tree background, so that it looks like a table.The horizontal line should fit the entire width of the tree.How can i do this in GWT?.Please help.
This should work. Add this class to your TreeItem:
.gwt-Tree table {
table-layout: fixed;
width: 100%;
}
.gwt-Tree table td:first-child {
width: 18px;
}
.myTreeItem {
margin-left: 0 !important;
padding: 3px 3px 3px 39px;
}
.myTreeItem, .myTreeItem > table {
border-bottom: solid 1px #464646;
}
I know I can set two box-shadows to the same element this way:
box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;
I am assigning css properties to a class in different parts of the page, so I wonder if it is possible to accomplish the same, assigning box-shadow two times. Something like:
box-shadow: inset 0 2px 0px #dcffa6;
box-shadow:0 2px 5px #000;
This however doesn't work, the second box-shadow overrides the first one.
Thanks.
EDIT:
I also tried applying two classes to the same element, with no luck: http://jsfiddle.net/DQvyw/
EDIT 2:
Not a real solution, but I ended up doing this: http://jsfiddle.net/DQvyw/1/
Another way to do this making two divs and give each the correct styling.
.divoutside{
border-radius: 8px;
box-shadow: 0px 2px 4px #4D4D4D;
}
.divinside{
border: 1px solid #4D4D4D;
border-radius: 8px;
box-shadow:inset 0 0 2px #FFA500;
padding: 4px;
}
<div class="divoutside"><div class="divinside"></div></div>
Example:
http://jsbin.com/ujuqem/1/edit
Happy coding :)
You can't do this with two separate declarations -- in CSS, when you define two values for the same rule, the latter declaration overrides the former. However, with JavaScript, you can concatenate the second value instead of replacing the old one with it. Something like:
var el = document.getElementsByClassName("your_class_name");
var n = el.length;
for(var i = 0; i < n; i ++) {
var cur = el[i];
cur.style.boxShadow += ", 0 2px 5px #000000"; //notice the comma in the beginning
}
I am not sure this is what you want, but I hope that helped you in any manner!
I'm using fancybox 2 and I can get rid of the padding around the outside of the frame, but then I lose the border-radius that it comes with.
What I want is a border-radius around the main content inside the frame. So I tried going into the css and adding a border-radius to the fancy-box inner selector and it won't work. How can I give the frame a rounded corner without a border?
If anyone can help me with this that would be great!
Try this code it worked for me
Add custom classes after fancy box on complete method.
Ex.
HTML
Login
JS
$(document).ready(function(e) {
$(".signin-ovr").fancybox({
afterLoad : function(){
$("#fancybox-content").addClass('fancybox-content-cust');
$(".fancybox-bg").addClass('fancybox-bg-cust');
$("#fancybox-outer").addClass('fancybox-outer-cust');
}
});
});
CSS
.fancybox-content-cust {
overflow: visible !important;
border: 10px solid #FFFFFF;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.fancybox-bg-cust{
display: none;
}
.fancybox-outer-cust {
background: transparent !important;
}
Then you will get border radius to the overlay box.
for fancybox v2 round borders
.fancybox-outer, .fancybox-inner, .fancybox-skin {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px!important;
}
CSS3 has a border radius property ironically enough entitled border-radius there are a few specific variations ie, Firefoxes moz-border-radius.
It is used like so:
#div-id .specific-class {
border-radius: 10px;
}
If you only want one rounded it has the ability to be modified like so
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
I hope this answers your question.
I have a Telerik tree and drag & drop node move is in action. But then I applied a theme (bought from somewhere) to the overall design of my site, and now, the hint are gone.
When you drag a node, some horizontal hint lines appear, so that you can understand that if you release your node (drop it) where it would be dropped.
Try adding the following CSS to the page. It will force the styles upon the TreeView drop hint.
.rtDropAbove, .rtDropBelow {
border: 1px dotted black !important;
font-size: 3px !important;
height: 3px !important;
line-height: 3px !important;
margin-top: -1px !important;
}
.rtDropAbove {
border-bottom: 0 !important;
}
.rtDropBelow {
border-top: 0 !important;
}
Something's z-index property is messing up with Telerik's RadTree. It's all z-index stuff.