I want to replace the InputFile's rectangle with 'attach Icon'. I tried to set the URL of the icon to 'background-image' of InputFile but it had no effect.
This only demonstrates how to change the color of InputFile, not exactly what I need.
I use something similar for a colour picker.
<label for="fileinput" class="label-wrapper">
<span class="oi oi-paperclip"></span>
<InputFile id="fileinput" class="custom-input-hide" />
</label>
<style>
.label-wrapper:hover {
cursor: pointer;
}
.custom-input-hide {
width: 0;
height: 0;
overflow: hidden;
}
</style>
BlazorRepl
I think maybe this is what you are looking for.
HTML/Razor code
<div class="file-input-zone">
<InputFile />
</div>
CSS
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: black;
cursor: pointer;
position: relative;
width: 120px;
height: 120px;
background-image: url('paper-clip.png');
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
In the CSS code above, the file paper-clip.png is installed in wwwroot directory.
The button will look like a transparent paper-clip. In the image below, color changes on hover as well.
Related
I have a blazor application that accept multi languages, I want to change the language of InputFile depends of CultureInfo.CurrentCulture.
Razor page
string CultureLang = CultureInfo.CurrentCulture.Name.Split('-')
[0].ToString();
<InputFile class="form-control" OnChange="async (e) => await
LoadFiles(e)" multiple lang="#CultureLang"></InputFile>
I get the the right CultureInfo but UI of InputFile is still in English
Thanks.
I used the bootstrap and fontawesome to delete the default style of InputFile:
<label for="filePicker" class="label">
<i class="fas fa-paperclip"></i>
<span class="title">#Label</span>
<InputFile id="filePicker" class="invisible" OnChange="async (e) => await LoadFiles(e)" multiple></InputFile>
</label>
Css
.label {
width: 15rem;
height: 2.5rem;
border: 2px dashed;
border-radius: 5px;
display: block;
padding: 0.5em;
transition: border 300ms ease;
cursor: pointer;
text-align: center;
}
i{
display: block;
font-size: 42px;
padding-bottom: 16px;
}
.title {
transition: 200ms color;
}
.label:hover {
border: 2px solid;
}
Note that Label is text that will be translated depends on CurrentCulture, I used here IStringLocalizer to get the right translation from the resource.
I have a white space under my website.
http://braulionova-001-site18.atempurl.com/DirectorioMedico.aspx
I check css, break tags.
Some pages are fine but other have this white space under footer page.
Looks like the element .autocomplete_completionListElement has a visibility: hidden with height 200px.
visibility: hidden keeps the element there, with height and width but turns it invisible. Seems like you don't want it there since you tried hiding it. To get rid of it just use display: none.
you have a class in a your css named autocomplete_completionListElement which has a been given a height of 200px. try commenting the height and check as givne below. Hope this helps.
.autocomplete_completionListElement {
visibility: hidden;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
/* height: 200px; */
text-align: left;
list-style-type: none;
}
Hope this helps.
The problem is because of the element with class .autocomplete_completionListElement.
Update your code with the code below. It will work fine.
.autocomplete_completionListElement {
/*visibility: hidden;*/
display: none;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
height: 200px;
text-align: left;
list-style-type: none;
}
Try to This CSS code..
.footer
{
background:#333333;
color:#848484;
font-size:12px;
font-size:12px;
font-family:Open Sans,sans-serif;
font-weight:bold;
text-align:center;
padding:7px 50px 10px 0px;
vertical-align:middle;
margin-top:10px;
}
so right now, I have many buttons on a webpage. Most of these buttons contain one url which when clicked directly sends you to the webpage with the url. Some buttons, however, consist of multiple urls. For these buttons, I would like a white text box with the list of urls to appear after the user clicks the button. Separating these multiple urls buttons into single url buttons is not an option.
I've looked into System.Windows.Forms.MessageBox. but that does not produce desirable results.
I appreciate any help I can get. Thanks in advance.
hidden checkbox css:
html {
width: 100%;
height: 100%;
background: indigo;
text-align: center;
font-family: arial, sans-serif;
}
a, a:active, a:visited, a:focus {
text-decoration: none;
font-weight: bold;
color: indigo;
}
input {
display: none;
}
#target {
display: none;
}
#click:checked ~ label > #target {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
display: inline-block;
height: 80%;
width: 80%;
background-color: white;
outline: 6px double white;
}
.item {
color: white;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.warning {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left:0;
right:0;
margin: auto;
}
<input type="checkbox" id="click" name="click" value="click" />
<label for="click">
<p class="item"><b>google.com</b></p>
<div id=target class="item"><div class=warning>
images.google.com<br>
maps.google.com<br>
drive.google.com</div></div>
</label>
My simple div element is as below:
<div class="avatar">
<img src="http://quickshare.my3gb.com/download/testpic.jpg" />
</div>
(The original image is 216 * 216 pixels)
and my CSS is as follows,
.avatar {
float: right;
border: 1px #ccc solid;
width: 70px;
height: 80px;
overflow: hidden;
position: absolute;
}
And the fiddle, http://jsfiddle.net/BMU4Y/2/
The question is, I cannot get the image to fit on the div within which it resides.
Any help would be much appreciated. [I also tried for a jquery image-resizer, but could not find anything that really works :( ]
Kindly note this is for my HTML 5 website being built with C# and MVC 4
The overflow is not needed here. And to make the image fit the div, it should have 100% heigh and width.
.avatar {
float: left;
border: 1px #ccc solid;
width: 70px;
height: 80px;
position: relative;
}
.avatar img {
width: 100%;
height: 100%;
}
http://jsfiddle.net/BMU4Y/3/
Try this...
.avatar {
float: left;
border: 1px #ccc solid;
width: 70px;
height: 80px;
overflow: hidden;
position: relative;
}
.avatar img {
max-width:100%;
height:100%;
}
Just add at .css file
.avatar img{
width:100%;
height:100%;
}
If I'm right in understanding that you want the image to fit within your explicitly sized div, then adding the following to your css will make it work:
.avatar img {
height: 100%;
width: 100%;
}
.avatar
{
float: left;
border: 1px #ccc solid;
overflow: hidden;
width:60px;
height:60px;
}
.avatar img {
width:inherit;
height:inherit
}
.avatar img {
width: 100%;
height: auto;
display: block;
}
You need the image to be in display block and not inline which is by default.
Then give it 100% width (of its parent width), but for the height I've set it in auto. Not 100% because it will stretch it in both dimensions usually with strange results.
Inherit the width and height of div to Image. Add below CSS and it will work like charm.
Fiddle: http://jsfiddle.net/BMU4Y/8/
.avatar {
float: left;
border: 1px #ccc solid;
width: 70px;
height: 80px;
overflow: hidden;
position: relative;
}
div.avatar img
{
width:inherit;
height:inherit
}
I have a FileUpload Control like this
<asp:FileUpload ID="fileuploader" runat="server" />
Now I want to apply css only on the Browse button part
How can I do this?
Styling an input tag with type="file" requires a bit of work, browsers don't behave similarly when you try to style them unfortunately.
There are a few methods of doing so though:
http://www.quirksmode.org/dom/inputfile.html
http://www.appelsiini.net/projects/filestyle
This is possible you can change the FileUpload control using following code.
Step 1: Change FileUpload control with this code on aspx page
<label class="file-upload">
<span><strong>Upload Image</strong></span>
<asp:FileUpload ID="FileUpload1" runat="server" >
</asp:FileUpload>
</label>
Step 2: now add below CSS code into your main CSS file
.file-upload {
display: inline-block;
overflow: hidden;
text-align: center;
vertical-align: middle;
font-family: Arial;
border: 1px solid #124d77;
background: #007dc1;
color: #fff;
border-radius: 6px;
-moz-border-radius: 6px;
cursor: pointer;
text-shadow: #000 1px 1px 2px;
-webkit-border-radius: 6px;
}
.file-upload:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
background-color: #0061a7;
}
/* The button size */
.file-upload {
height: 30px;
}
.file-upload, .file-upload span {
width: 90px;
}
.file-upload input {
top: 0;
left: 0;
margin: 0;
font-size: 11px;
font-weight: bold;
/* Loses tab index in webkit if width is set to 0 */
opacity: 0;
filter: alpha(opacity=0);
}
.file-upload strong {
font: normal 12px Tahoma,sans-serif;
text-align: center;
vertical-align: middle;
}
.file-upload span {
top: 0;
left: 0;
display: inline-block;
/* Adjust button text vertical alignment */
padding-top: 5px;
}
It's done.
apparently you cannot style them directly with CSS but you can "hack" a new style into them - read the following article for details
http://www.quirksmode.org/dom/inputfile.html