Develop Reference

Custom InputFile in Blazor

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.

How to fix custom radio button in webforms

I am using css codes for custom radio button. If i use html codes everything is ok. But i am trying to use asp:RadioButton and it renders one more tag in label. So css code is not working that way. Any idea how to fix?
Custom RadioButton HTML Code (Works Fine):
<label class="container">
<input type="radio">
<span class="checkmark"></span>
</label>
RadioButton ASP.NET Renders in span tag. Output of HTML (Not Working):
<label class="container">
<span>
<input type="radio">
<label>Option One</label>
</span>
<span class="checkmark"></span>
</label>
Here is CSS Code
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}

I've put your code into an aspx page.
I found that the span tag isn't closed:
<label class="container">
**<span>**
<input type="radio">
<label>Option One</label>
**<span>**
<span class="checkmark"></span>
</label>
I closed it and it doesn't work on my page either.
As I couldn't see why you would want to have that span tag I removed it. I have it like that:
<label class="container">
<input type="radio">
<label>Option One</label>
<span class="checkmark"></span>
</label>
It works on my page as I can select the Radio Button and it shows in blue as per your style code.
Hope this helps.

Drop-down menu between ul and li tags doesn't appear

Am I missing something?
I am trying to make the dropdown menu to appear. when i make the page smaller i can see that the menu appear on the bar (i can see only the tip of the "home" option). but, when the page is wide open it seems like it doesn't open at all.
<ul>
<li><a style="color:#1a1a1a;" class="welcometitle">Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
<li style="float:right; background-color: #4CAF50;" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" <%--onclick="myfunction()"--%> href="#">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu" role="listbox">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li style="float:right; padding-right:10px; padding-top:5px; padding-left:5px;"><input type="text" class="form-control" placeholder="Search.." name="search"/></li>
<li style="float:right; padding-right:0px; padding-top:5px; background-color:#ffffff"><button class="btn" type="submit"><i class="fa fa-search" style=""></i></button></li>
</ul>
this is my css code, i really don't understand where am I wrong
.searchbar {
float: left;
margin: 0px 0;
}
ul#navigation {
float: left;
margin: 0 20px 0 0;
}
ul#navigation li {
display: inline;
margin-right: 10px;
}
* {box-sizing: border-box;}
ul {
list-style-type: none;
margin: 0;
padding-left: 160px;
overflow: hidden;
background-color: #1160a2;
top:0;
width:100%;
position:fixed;
}
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
li {
float: left;
}
li a {
/*display: block;*/
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
}
.active {
background-color: #4CAF50;
}
.search-container {
float: right;
}
.li input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 25px;
border: none;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 2px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.search-container button:hover {
background: #ccc;
}

in case someone has the same problem i found out that the answer was on the css class:
.show {display: block;}
just added "position: fixed" and that was it
.show {display: block;
position: fixed;
}

MVC CMS site "textboxfor" styled to look like plain text until clicked on

I am trying to build a CMS type website that can be edited by simply clicking on the different text fields when in an edit mode.
The problem is, I don't want the default text box styling formed when you use the TextBoxFor code.
Is there a way that I can format the 'TextBoxFor' code in Razor to look like normal static text, but still keep them editable. I need to use the existing CSS classes that would be used on the main site.
The reason for this would be to give a real-time preview of what the site would look like while the user is editing it.
So for example, each of these text fields in the image (populated from a model) need to be editable but the edit box to do so should look like plain text.
Is this possible? I am using .NET MVC 4...

Razor does simply generate HTML.
So what you can do is to tell razor to render the input with a class or an ID.
For example:
#Html.TextBoxFor(m => m.Property, new { #class = "your-class" })
Then you can style your textbox according to your needs, using CSS.
.your-class:focus{
//your style here
}
Also, Razor is very helpful, but can in some cases be to static.
Sometimes you have to use plain HTML to achieve your goals.

You can use contenteditable of HTML5 please find below example to understand how it works.
Read more about contenteditable LINK
$('.edit').click(function(){
$(this).hide();
$('.box').addClass('editable');
$('.text').attr('contenteditable', 'true');
$('.save').show();
});
$('.save').click(function(){
$(this).hide();
$('.box').removeClass('editable');
$('.text').removeAttr('contenteditable');
$('.edit').show();
});
body {
font-family: 'Source Sans Pro', sans-serif;
background: url(https://subtlepatterns.com/patterns/wood_pattern.png);
}
h3 {
padding-left: 20px;
text-transform: uppercase;
}
.box {
position: relative;
margin: 20px;
padding: 30px 10px 5px;
width: 400px;
min-height: 150px;
border: 1px solid grey;
border-radius: 3px;
background: #fff;
}
.editable {
border-color: #bd0f18;
box-shadow: inset 0 0 10px #555;
background: #f2f2f2;
}
.text {
outline: none;
}
.edit, .save {
width: 30px;
display: block;
position: absolute;
top: 0px;
right: 0px;
padding: 4px 10px;
border-top-right-radius: 2px;
border-bottom-left-radius: 10px;
text-align: center;
cursor: pointer;
box-shadow: -1px 1px 4px rgba(0,0,0,0.5);
}
.edit {
background: #557a11;
color: #f0f0f0;
opacity: 0;
transition: opacity .2s ease-in-out;
}
.save {
display: none;
background: #bd0f18;
color: #f0f0f0;
}
.box:hover .edit {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>inline editing with contenteditable & jquery</h3>
<div class="box">
<span class="edit">edit</span>
<span class="save">save</span>
<div class="text">
Hover this box and click on edit! - You can edit me then.
<br>When you finished - click save and you saved it.
</div>
</div>

Applying css on asp.net FileUpload Control's Browse Button only

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