cell border color is behaving weird

Question

So the color of my cells borders are behaving strange. I've done border-color:#4A90E2; but the color switches in the middle of the border. I have added image of what happens.

My ccs code for the cell is

.tre{
color:black;
width:613px;
height:20px;
position:absolute;
top:180px;
left:-160px;
font-size:40px;
font-family:avenir;
}
.fyra{
background-color:white;
width:463px;
height:51px;
position:absolute;
top:230px;
left:-160px;
border-radius:10px;
border-color:#4A90E2;
display:inline-block;
font-size:30px;
font-family:avenir;
}

my php code for the cell is

<tr> 
    <td class="tre">Efternamn</td>
</tr>
<tr>
   <td> <input class="fyra"type="text" name="efternamn"></td>
</tr>

How can I fix this, I want the border to be one color.

Image for Fast Snail. This is what happens when I click in the box.

Madhawa Priyashantha · Accepted Answer · 2016-03-14T14:15:36.210

1

use

border:2px solid #4A90E2;

instead of

border-color:#4A90E2;

default border style is inset .it looks like 2 color border example

https://jsfiddle.net/m0p05q25/

edited Mar 14 '16 at 14:15

answered Mar 14 '16 at 13:51

Madhawa Priyashantha

9,633
7
33
60

can you please help me, how can I change the color of the shadow that appears when you press in the cell. It is rectangle, I want it to be like the cell. – Markus Mar 14 '16 at 14:00
if you go in to the fiddle you linked, then press inside the box, there appears a rectangle shadow around the box, – Markus Mar 14 '16 at 14:03
How can I make that rectangle shadow to adjust to the box – Markus Mar 14 '16 at 14:03
@Markus what is your web browser ? – Madhawa Priyashantha Mar 14 '16 at 14:05
my web browser is safari – Markus Mar 14 '16 at 14:06
opps i don't have that one.i think it's browser dependent . i can't see a shadow – Madhawa Priyashantha Mar 14 '16 at 14:07
I just want it to not be a rectangle, but to adjust to the box – Markus Mar 14 '16 at 14:07
I added a picture in a new answer – Markus Mar 14 '16 at 14:20
now when I do outline:none; it goes away, but I would like it to stay just adjust to the box – Markus Mar 14 '16 at 14:21

score 0 · Answer 2 · edited Mar 14 '16 at 14:57

0

Add this to your .fyra class :

border-style: solid;

edited Mar 14 '16 at 14:57

dippas

58,591
15
114
126

answered Mar 14 '16 at 13:53

Jean-Charbel VANNIER

396
1
13

can you please help me, how can I change the color of the shadow that appears when you press in the cell. It is rectangle, I want it to be like the cell. – Markus Mar 14 '16 at 14:00
You can do the following with : `input[type=text]:focus { outline: none; }` [Check this answere for more details](http://stackoverflow.com/a/3397158/4843666) – Jean-Charbel VANNIER Mar 14 '16 at 14:14
alright thx that worked, but if I wanted it to stay just adjust to the box how should I then do? – Markus Mar 14 '16 at 14:22
Then you just add your style as you want to get the same result. As an example : `input[type=text]:focus { outline: none; box-shadow: 0 0 5px rgba(81, 203, 238, 1); border: 1px solid rgba(81, 203, 238, 1); }` – Jean-Charbel VANNIER Mar 14 '16 at 14:33

cell border color is behaving weird

2 Answers2