File upload styling css

Question

I have used css from following fiddle for my file upload.

http://jsfiddle.net/geniuscarrier/ccsGK/

I have successfully implement it. But I want to show "what image i am choose". Like below screenshot.

enter image description here

Is it achieve by css only??? Is it possible?? Please help.

It is not possible using CSS only. – Suresh Ponnukalai Jul 25 '14 at 06:01 — Suresh Ponnukalai, Jul 25 '14 at 06:01

score 0 · Answer 1 · answered Jul 25 '14 at 06:00

I kindly try the below css.

.btn-primary 
{
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #006dcc;
    background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background-image: -o-linear-gradient(top, #0088cc, #0044cc);
    background-image: linear-gradient(to bottom, #0088cc, #0044cc);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
    border-color: #0044cc #0044cc #002a80;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

Regards M

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

You can't achieve this by using CSS, instead, try using jQuery for indexing the selected file.

Refer to this to solve this situation properly.

edited May 23 '17 at 12:04

Community

1
1

answered Jul 25 '14 at 06:05

Pepelius

1,576
20
34

File upload styling css

2 Answers2