Empty Div with Red Border Is Visible as a Red Line - How to Hide It Only with CSS

Empty div with red border is visible as a red line - can I hide it only with CSS?

Yes. Here is one possible solution using empty-cells:

CSS

.error {
    display:table-cell;
    empty-cells:hide;
    padding: 10px;
    border: 1px solid red;
}

HTML

<div class="error"><!-- I am empty --></div>
<div class="error">Error'd!</div>

http://jsfiddle.net/At6Sp/

CSS to make an empty cell's border appear?

If I recall, the cell dosn't exist in some IE's unless it's filled with something...

If you can put a   (non-breaking space) to fill the void, that will usually work. Or do you require a pure CSS solution?

Apparently, IE8 shows the cells by default, and you have to hide it with empty-cells:hide But it doesn't work at all in IE7 (which hides by default).

how to hide the content of the div in css

Without changing the markup or using JavaScript, you'd pretty much have to alter the text color as knut mentions, or set text-indent: -1000em;

IE6 will not read the :hover selector on anything other than an anchor element, so you will have to use something like Dean Edwards' IE7.

Really though, you're better off putting the text in some kind of element (like p or span or a) and setting that to display: none; on hover.

How to remove the border highlight on an input text element

Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.

In your case, try:

input.middle:focus {
    outline-width: 0;
}

Or in general, to affect all basic form elements:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

---

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}

How to set a border for an HTML div tag

Try being explicit about all the border properties. For example:

border:1px solid black;

See Border shorthand property. Although the other bits are optional some browsers don't set the width or colour to a default you'd expect. In your case I'd bet that it's the width that's zero unless specified.

red border in textbox if it is not fiiled using jquery

You need to subscribe to the input event and in the handler call this function

$('#TextBoxID').on('input', function() {
  const input = $(this);
  if(input.val()) {     input.css('border-color', '');  } else {     input.css('border-color', 'red');  }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input id="TextBoxID">

Placing border inside of div and not on its edge

Set box-sizing property to border-box:

div {    box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;    width: 100px;    height: 100px;    border: 20px solid #f00;    background: #00f;    margin: 10px;}
div + div {    border: 10px solid red;}

<div>Hello!</div><div>Hello!</div>

---

Related Topics